JavaScript RemoveChild logique/question

Question

J'utilise Dojo Drag and Drop. Lorsqu'un utilisateur ajoute un élément à un conteneur (div dojoType = 'dojo.dnd.Source'), j'ai besoin de récupérer ces données dans un formulaire afin de pouvoir les traiter ultérieurement sur un serveur lorsque l'utilisateur soumet la page entière. Cette partie fonctionne. Ensuite, pour supprimer un élément, je leur permets de glisser/déposer un élément dans un conteneur "poubelle". J'ai du mal à conceptualiser comment retirer l'objet des champs cachés. J'ai déjà un code d'abonnement/événement pour appeler les deux fonctions suivantes.

Pouvez-vous me dire s'il y a une meilleure façon de faire la fonction removeGoalFromHiddenFields? Il peut y avoir plusieurs éléments "subgoal".

Je suis sur le point de commencer les tests avec ce que j'ai ci-dessous, mais j'ai des doutes à ce sujet.

Merci,

Neal Walters

function addGoalToHiddenFields(goalText){ 
     var field = document.createElement("input"); 
     field.setAttribute("type","hidden"); 
     field.setAttribute("value",goalText); 
     field.setAttribute("name","subgoal"); 

     //add new hidden-element to the existing form 
     document.getElementById("form1").appendChild(field); 
    } 

    function removeGoalFromHiddenFields(goalText){ 

     //remove hidden field 
     nodes = document.getElementById("form1") 
     for (i=0;i<nodes.length ;i++) 
      { 
      var pos = nodes[i].innerHTML.IndexOf(goalText) 
      if (pos > 0) 
      { 
       nodes.removeChild(node[i]); 

      } 
      } 

}

Aussi, puis-je faire à la place: nœuds = document.getElementById ("subgoal")

Answer 1

Je suis deviner ce que vous voulez ici est la fonctionnalité de dojo.query.

Essayez quelque chose comme:

dojo.query("#form1 input[value=\"" + goalText + "\"]").forEach(function(field) { 
    field.parentNode.removeChild(field) 
}); 

Answer 2

field.setAttribute ("type", "caché"); N'utilisez pas setAttribute sur les documents HTML.

Il y a beaucoup de bugs dans IE. Utilisez les propriétés DOM-HTML normaux, qui sont aussi plus faciles à lire:

field.type= 'hidden'; 

var pos = nœud [i] .innerHTML.IndexOf (goalText)

Une recherche dans la balise HTML pour une La valeur est stupide et ne fonctionnera pas lorsque goalText contient un caractère tel que '<' ou '&' que le code HTML va s'échapper.

Pour le code ci-dessus, il semble que nodes[i] devrait être l'un des <input> éléments que vous annexés là, auquel cas innerHTML est pas bon car il ne recherche le contenu de l'entrée, ce qui est rien en entrée est vide élément. Au lieu de cela, regardez la propriété value vous mettez là:

var input= nodes[i]; 
if (input.name=='subgoal' && input.value==goalText) 
    input.parentNode.removeChild(input); 

Aussi, puis-je faire à la place: noeuds = document.getElementById ("subgoal")

Non, vos éléments subgoal n'a pas d'ID.Soit obtenir par nom:

var subgoals= form.getElementsByName('subgoal'); 

(qui est le même que DOM-0 :)

var subgoals= form.elements.subgoal; 

ou, ajoutez une carte d'identité à chaque sous-but de vous aider à récupérer plus tard:

field.id= 'id-'+goalText; 

ce qui précède ne fonctionnera pas, encore une fois, si vous pouvez avoir des caractères spéciaux dans goalText.

Vous pouvez également conserver votre propre recherche en JavaScript plutôt que de mettre tout dans les DOM:

var subgoalfields= {}; 
... 
// on add 
subgoalfields[goalText]= field; 
... 
// on remove 
subgoalfields[goalText].parentNode.removeChild(subgoalfields[goalText]); 
delete subgoalfields[goalText];