使用 removeChild 删除多个表单输入时出错。答案

【问题标题】：Error when using removeChild to remove multiple form inputs.使用 removeChild 删除多个表单输入时出错。
【发布时间】：2013-09-06 04:25:18
【问题描述】：

尝试删除表单中所有选中的复选框时，我不断收到错误消息。

"Uncaught TypeError: Cannot read property 'checked' of undefined"

运行时

// remove only the 'checked' tasks
function remChecked() {
var nList = document.forms["theForm"].getElementsByTagName("input");
    for (var i = 0, l = nList.length; i < l; i = i + 1) {
        var list = nList[i];
        if (list.checked == true) {
            list.parentNode.removeChild(list);
        }
    }
}

var el3 = document.getElementById("removeChecked");
el3.addEventListener("click", remChecked, false);

错误是指上面带有“if”的行。

当只有一个带有checked=true 属性的复选框输入时，它可以正常工作。

任何帮助将不胜感激！

【问题讨论】：

所有输入元素都是复选框还是单选按钮？如果有任何隐藏、文本、密码等。它们将没有选中的属性。
您还预先确定了输入列表的长度，但 nList 是实时 NodeList...取决于您删除/满足您的条件的项目数量，您可能会结束出现索引越界错误。

标签： javascript dom nodes

【解决方案1】：

当从 live NodeList 中移除元素时，您需要以相反的顺序移除它们。

function remChecked() {
  //nList is a live NodeList
  var nList = document.forms["theForm"].getElementsByTagName("input");
  //loop backwards...
  for(var i=nList.length-1;i>-1;i--){
    var list = nList[i];
    if(list.checked == true){
        list.parentNode.removeChild(list);
    }
  }
}
var el3 = document.getElementById("removeChecked");
    el3.addEventListener("click", remChecked, false);

如果最初有 12 个复选框......并且一半 (6) 被选中。当您从 0 循环到“长度”时，如果您删除一个项目，则长度会缩小……因此，当您到达 11 (n-1) 时，没有匹配的元素。

通过反向工作...（11 到 0），如果您删除 11，这不是问题，因为下一次迭代是 10...然后是 9，然后是 8，...

【讨论】：

是的，就是这样！它完美地工作。 “逆向工作”我从来没有想过这一点，但事后看来，这似乎很明显！谢谢。
或者while (nList.length) nList[0].parentNode.removeChild(nList[0]);或者var i = nList.length; while (i--) nList[0].parentNode.removeChild(nList[0]);等等。