JavaScript RemoveChild逻辑/问题

Question

我正在使用Dojo拖放。当用户向容器添加项(div dojoType='dojo.dnd.Source')时，我需要将数据放入表单中，以便稍后在用户提交整个页面时在服务器上对其进行处理。这一部分正在发挥作用。然后，为了删除项目，我允许他们将项目拖放到“垃圾桶”容器中。我很难概念化如何从隐藏字段中删除项。我已经有了订阅/事件代码来调用以下两个函数。

你能告诉我有没有更好的方法来做removeGoalFromHiddenFields函数？可以有许多“子目标”项。

我将使用下面的代码开始测试，但我对此有一些疑问。

谢谢,

尼尔·沃尔特斯

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

             }
           }

}

另外，我可以这样做吗: nodes =document.getElementById(“子目标”)

Answer 1

我猜您在这里需要的是dojo.query的功能。

尝试如下所示：

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

Answer 2

field.setAttribute(“类型”，“隐藏”)；

不要在超文本标记语言文档上使用setAttribute。IE上有很多bug。使用普通的DOM-HTML属性，这些属性也更易于阅读：

field.type= 'hidden';

变量位置= nodei.innerHTML.IndexOf(goalText)

在HTML标记中搜索值是愚蠢的，当goalText包含像“<”或“&”这样的字符，而HTML将对其进行转义时，这种方法将不起作用。

对于上面的代码，看起来nodes[i]应该是您附加到那里的<input>元素之一，在这种情况下，innerHTML不好，因为它只搜索输入的内容，因为输入是空元素。相反，看看您放在那里的value属性：

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

另外，我可以这样做吗：

= document.getElementById("subgoal")

不，因为您的子目标元素没有ID。get by name：

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

(与DOM-0相同：)

var subgoals= form.elements.subgoal;

或者，将ID添加到每个子目标，以帮助您以后检索它：

field.id= 'id-'+goalText;

同样，如果您在goalText中可以使用特殊字符，则上面的操作将不起作用。

或者，在JavaScript中保留您自己的查找，而不是将所有内容都放在DOM中：

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