Question

我一直在尝试编写一些内容来删除元素中的所有节点，包括这些节点中的节点。我觉得我已经非常接近这个了

function clear(node) {
    var l = node.childNodes.length;
    for (var i = 0; i < l; i++) {
        console.log(i, node.childNodes);
        var child = node.childNodes[i];

        if (!child.hasChildNodes()) {
            var newchild = child.parentNode;
            newchild.removeChild(child);
            console.log("removed" + child);
            clear(newchild);
        } else {
            clear(child);
        }
    }
}

标记看起来像这样

<div>
    <canvas></canvas>
    <div id="diagbox">
        <div id="diag_text">Here's some text</div>
    </div>
    <ul id="option_ul">
        <li>Some text</li>
        <li>Some text</li>
    </ul>
</div>

这就是失败前的程度：

<div>
    <div id="diagbox">
        <div id="diag_text"></div>
    </div>
    <ul id="option_ul">
    </ul>
</div>

它删除diag_text中的文本节点，但无法删除实际的div。它还删除了li元素中的文本节点，并且由于某种原因也成功删除了li元素，但是在ul处停止。画布也被成功删除，这是奇怪的，因为它是顶级的，我假设这就是为什么其他人不工作。整个过程停止了，因为在某些时候发生了TypeError，“child is undefined”。

不太确定我在哪里出错了

编辑：绝对应该指定：我想要通过并删除所有节点而不仅仅是父节点，因为这些元素的内容实际上是动态生成的，需要根据不同的用例进行清理。

Answer 1

我认为递归解决方案可能比你想象的要简单得多。

此功能仅在删除了所有子节点后删除每个节点，因此您可以擦除/释放需要回收的所有资源。

工作实例（打开控制台）：

＆＃13;

var n = document.getElementById("parent");

function clearInner(node) {
  while (node.hasChildNodes()) {
    clear(node.firstChild);
  }
}

function clear(node) {
  while (node.hasChildNodes()) {
    clear(node.firstChild);
  }
  node.parentNode.removeChild(node);
  console.log(node, "cleared!");
}

clearInner(n);

＆＃13;

<div id="parent">
  <div></div>
  <div></div>
  <div>
    <div></div>
    <div></div>
    <div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div></div>
  <div></div>
</div>

＆＃13;

Answer 2

首先，您不需要删除子节点。删除父级将成功。所以，有一些形式：

while (node.firstChild) {
  node.removeChild(node.firstChild)
}

会做到这一点。

至于您的具体问题：childNodes是动态的。作为删除元素，它会更改，因此从静态长度索引到它将不起作用。你会注意到在我上面的例子中我只看过firstChild，因为在每个removeChild之后它会指向一个新元素。

因此，要修复代码，请使用像这样的动态或反向处理数组：

for (var i = l - 1; i >= 0; i--) {...

这样做是有效的，因为你从末尾切断节点，之前的孩子仍然存在。

Answer 3

为什么不

var n = document.getElementById("parent");

n.innerHTML="";

以javascript

3 个答案: