从表单中删除节点？ [复制]

Posted 2023-02-19

【中文标题】从表单中删除节点？ [复制]

【英文标题】：Remove nodes from a form? [duplicate]

【发布时间】：2017-11-15 13:34:12

【问题描述】：

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

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

一些节点被删除，但我收到了这个错误：

未捕获的类型错误：无法在“节点”上执行“removeChild”：参数 1 不是“节点”类型

考虑到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 不同。我的问题的解决方案可能类似，但问题不一样。

【问题讨论】：

修改后还有问题吗？

我知道，我刚刚发现了错误并编辑了我的问题。

@trincot 有点像。我仍在决定最佳解决方案。我可以使用Array.prototype.slice。它会更简单，但向后运行 for 循环会更有效。

【参考方案1】：

childNodes 属性会随着您移除子项而更新。

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

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

【讨论】：

在 NodeList 为空之前，我无法继续删除第一个子节点，因为我将添加逻辑来保留某些节点。我尝试向后运行循环，但没有奏效。我已经在我的编辑中展示了这一点。

向后运行应该可以。使用调试器查看它在做什么。

我忘记将++ 更改为-- 所以它当然不起作用。

【参考方案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++;
     

【讨论】：

您的代码几乎删除了所有节点，但留下了一些文本。