Question

我试图从表单中删除（几乎）所有节点。我设法使用以下代码从表单中删除所有节点：

var form;
form = document.getElementById(id);
while (form.hasChildNodes())
    form.removeChild(form.lastChild);

然而，这还不够，因为我将添加一些逻辑来保留某些节点。因此，我需要使用for loop删除节点。我尝试使用以下代码：

var form, formNodes, totalNodes, i;
form = document.getElementById(id);
formNodes = form.childNodes;
totalNodes = formNodes.length;
for (i = 0; i < totalNodes; i++)
    form.removeChild(formNodes[i]);

删除了一些节点，但收到了此错误：

Uncaught TypeError：无法在'Node'上执行'removeChild'：参数1不是'Node'类型

考虑formNodes只包含节点，可能导致错误的原因是什么？

修改

我尝试使用以下代码向后循环：

var form, formNodes, totalNodes, i;
form = document.getElementById(id);
formNodes = form.childNodes;
totalNodes = formNodes.length;
for (i = totalNodes - 1; i >= 0; i--)
    form.removeChild(formNodes[i]);

它会删除所有节点。我将从i中减去偏移量变量，以便我能够保留某些节点。

修改

我的问题不同，因为我试图从表单中删除节点，而不是使用getElementsByTagName来获取段落元素。 node与element不同。我的问题的解决方案可能类似，但问题不一样。

Answer 1

删除子项时childNodes属性会更新。

因此，一旦删除了一半的子节点，您的索引将超过更新的NodeList的末尾。

您应该向后循环（以便索引永远不会调整）或提前复制到数组。或者只是继续删除第一个子节点，直到NodeList为空。

Answer 2

这是因为form.childNodes返回live collection，您可以使用querySelectorAll()代替：

https://developer.mozilla.org/en-US/docs/Web/API/NodeList

var form = document.getElementById("form");
var formNodes = form.querySelectorAll('*');
var totalNodes = formNodes.length;
for (i = 0; i < totalNodes; i++) {
    formNodes[i].remove();
}

自定义逻辑

var form = document.getElementById("form");
var formNodes = form.childNodes; // live
var totalNodes = formNodes.length;
var removed = 0;
for (var i = 0; i < totalNodes; i++) {
    if (odds(i)) {
        form.removeChild(formNodes[i - removed]);
        removed++;
    } 
}

从表单中删除节点？

修改

修改

2 个答案: