Ajout et suppression d'une division à l'aide de JavaScript

Question

<script type="text/javascript"> 
    var num=2; 
    function addElement() 
    { 
     var ni = document.getElementById('myDiv'); 
     var newdiv = document.createElement('div'); 
     var divIdName = 'my'+num+'Div'; 
     newdiv.setAttribute('id',divIdName); 
     newdiv.innerHTML = 'Subject-' + num + '* :<input type="text" id=textbox"' + num + '"/><a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove</a>'; 
     ni.appendChild(newdiv); 
     num=num+1; 
    } 

    function removeElement(divNum) 
    { 
     alert(divNum.id); 
     var d = document.getElementById('myDiv'); 
     var dd =document.getElementById(divNum.id); 
     d.removeChild(dd);  
     for(var i=0;i<d.childNodes.length;i++) 
     { 
      if(d.childNodes[i].id==divNum.id) 
      { 
       d.removeChild(d.childNodes[i]);  
      } 
     } 
    } 
</script>   

Cela fonctionne très bien dans Internet Explorer mais dans Firefox il donne une erreur comme l'élément my1Div n'est pas défini. Pourquoi cela se produit-il et comment peut-il être corrigé?

Merci.

Answer 1

changement

newdiv.innerHTML = 'Subject-' + num + '* :<input type="text" id=textbox"' + num + '"/><a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove</a>'; 

à

newdiv.innerHTML = 'Subject-' + num + '* :<input type="text" id=textbox"' + num + '"/><a href=\'#\' onclick=\'removeElement("'+divIdName+'")\'>Remove</a>'; 

(ajouter les "guillemets)

puis changer

var dd =document.getElementById(divNum.id); 

à

var dd =document.getElementById(divNum); 

(enlever .id)

Answer 2

Je n'ai pas exécuté le code mais je suppose que vous pourriez être en train de frapper les DOM TextNodes, qui n'ont pas beaucoup de méthodes que les éléments ont définies. Pour contourner cela, vous pouvez vérifier spécifiquement pour les nœuds de texte en utilisant quelque chose comme

if (d.childNodes[i].nodeName === "#text") continue; 

Bien sûr, cela pourrait être la solution tout à fait tort. Si vous pouviez éditer votre message et dire quelle ligne est erronée, cela pourrait vous aider.

Answer 3

Vos citations sont fausses à la fois l'appel removeElement et l'ID de zone de texte. Cela arrive toujours lors de la traduction simultanée de HTML à partir de chaînes de caractères, en particulier JavaScript à l'intérieur du code HTML dans les chaînes JavaScript. C'est trop de niveaux de nidification pour l'esprit à faire face. Utilisez les méthodes DOM à la place.

Évitez setAttribute, il est moins lisible que les méthodes HTML DOM niveau 1 normales, et a de nombreux bugs dans IE. removeElement est également une façon très étrange de dire d.parentNode.removeChild(d) deux fois - inefficacement, sauf si vous avez deux éléments avec le même ID. (Ce que vous ne devriez pas, car il est tout à fait invalide.Si vous le faites, il échouera pour tous les autres enfants correspondants que vous faites une itération destructive vers l'avant.)

Si vous utilisez une fermeture, vous pouvez également perdre tous les trucs désagréables. en se rappelant quel élément est qui, et remplacer le lot par:

function addElement() { 
    var newdiv= document.createElement('div'); 
    newdiv.appendChild(document.createTextNode('Subject-' + num + '* :')); 
    newdiv.appendChild(document.createElement('input')); 
    newdiv.appendChild(document.createElement('a')); 
    newdiv.lastChild.href='#'; 
    newdiv.lastChild.onclick= function() { 
     newdiv.parentNode.removeChild(newdiv); 
     return false; 
    }; 
    newdiv.lastChild.appendChild(document.createTextNode('Remove')); 
    document.getElementById('myDiv').appendChild(newdiv); 
}