JavaScript RemoveChild logic/question

Question

I'm using Dojo Drag and Drop. When a user adds an item to a container (div dojoType='dojo.dnd.Source') then I need to get that data into a form so I can later process it on a server when the user submits the whole page. That part is working. Then to remove an item, I allow them to drag/drop an item to a "trash" container. I'm having difficult conceptualizing how to remove the item from the hidden fields. I already have subscribe/event code to call the following two functions.

Can you let me know if there is better way to do the removeGoalFromHiddenFields function? There can be many "subgoal" items.

I'm about to begin testing with what I have below, but I have some doubts about it.

Thanks,

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]);

             }
           }

}

Also, can I do this instead: nodes = document.getElementById("subgoal")

Answer 1

I'm guessing what you want here is the functionality of dojo.query.

Try something like:

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

Answer 2

field.setAttribute("type","hidden");

Don't use setAttribute on HTML documents. There are many bugs in it on IE. Use the normal DOM-HTML properties, which are also easier to read:

field.type= 'hidden';

var pos = node[i].innerHTML.IndexOf(goalText)

Searching through HTML markup for a value is silly, and won't work when goalText contains a character like ‘<’ or ‘&’ that HTML will escape.

For the code above, it looks like nodes[i] should be one of the <input> elements you appended there, in which case innerHTML is no good as it will only search the contents of the input, which is nothing as input is an empty element. Instead, look at the value property you put there:

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

Also, can I do this instead: nodes = document.getElementById("subgoal")

No, as your subgoal elements have no IDs. Either get by name:

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

(which is the same as DOM-0:)

var subgoals= form.elements.subgoal;

or, add an ID to each subgoal to help you retrieve it later:

field.id= 'id-'+goalText;

the above won't work, again, if you can have special characters in goalText.

Alternatively, retain your own lookup in JavaScript rather than putting everything in the DOM:

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