递归删除javascript中的所有嵌套节点

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

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

只有在删除所有子节点后，此功能才会删除每个节点，因此您可以清理/释放您需要回收的任何资源。

工作现场示例（打开控制台）：

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

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