JavaScript logique / question RemoveChild

Question

J'utilise Dojo glisser-déposer. Lorsqu'un utilisateur ajoute un élément à un conteneur (div dojoType = « dojo.dnd.Source »), alors je dois obtenir ces données dans un formulaire pour que je puisse traiter plus tard sur un serveur lorsque l'utilisateur soumet la page. Cette partie travaille. Ensuite, pour supprimer un élément, je leur permets de glisser / déposer un élément dans un conteneur « poubelle ». Je vais avoir conceptualiser difficile comment supprimer l'élément des champs cachés. J'ai déjà s'abonner / code d'événement pour appeler les deux fonctions suivantes.

Pouvez-vous me faire savoir s'il y a une meilleure façon de faire la fonction removeGoalFromHiddenFields? Il peut y avoir beaucoup de points « subgoal ».

Je suis sur le point de commencer à tester avec ce que j'ai ci-dessous, mais j'ai quelques 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]);

             }
           }

}

En outre, je peux le faire à la place:           nœuds = document.getElementById ( "sous-but")

Answer 1

Je devine 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é");

Ne pas utiliser setAttribute sur des documents HTML. Il y a beaucoup de bugs dans ce sur IE. Utilisez les propriétés normales DOM-HTML, qui sont aussi plus faciles à lire:

field.type= 'hidden';

  

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

Recherche par balisage HTML pour une valeur est stupide, et ne fonctionnera pas si goalText contient un caractère comme « < » ou « & » que HTML échappera.

Pour le code ci-dessus, il semble que nodes[i] devrait être l'un des éléments de <input> vous y annexés, auquel cas innerHTML est pas bon car il ne recherche le contenu de l'entrée, ce qui est rien en entrée est un élément vide . 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);

  

En outre, je peux le faire à la place: noeuds = document.getElementById ( "subgoal")

Non, que vos éléments ont subgoal aucun ID. Soit obtenir par nom:

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

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

var subgoals= form.elements.subgoal;

ou, ajouter un ID à chaque sous-but de vous aider à récupérer plus tard:

field.id= 'id-'+goalText;

ci-dessus ne fonctionne 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 le DOM:

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