Javascript 删除 div/node 的所有后代答案

【问题标题】：Javascript remove all descendants of a div/nodeJavascript 删除 div/node 的所有后代
【发布时间】：2011-02-09 20:40:44
【问题描述】：

一段时间以来，我一直在研究 Javascript 中的一些内存泄漏问题。我已经到了这样一个地步，我觉得至少一些泄漏的唯一解决方案是删除给定的 div，然后删除它的所有后代。意思是孩子、孙子等等。

现在我的印象是，如果我想这样做，我需要一个递归函数，但我对 Javascript 还是有点陌生。我什至不知道递归在 Javascript 中的工作方式是否与我习惯的方式相同。

我对如何做这种事情的任何想法持开放态度，也许我对递归的想法有些偏离。

【问题讨论】：

递归的工作原理是一样的——只是要小心使用用var声明的局部变量而不是全局变量。（请记住，变量具有函数作用域而不是通常的块作用域）
stackoverflow.com/questions/683366/… 的可能重复项，如果不是，则该问题有有用的答案。
您在项目中使用了任何框架吗？我知道 jQuery 有一个 empty() 方法，可以从元素中删除所有子元素。如果 Prototype / MooTools / etc 中没有等价物，我会感到惊讶。

标签： javascript memory-leaks tree

【解决方案1】：

这将快速销毁节点及其所有子节点：

var _dummyNode;
var destroy = function(node){
   if(!_dummyNode) _dummyNode = document.createElement('div');
   _dummyNode.appendChild(node.parentNode.removeChild(node));
   _dummyNode.innerHTML = "";
}
destroy(nodeToDestroy);

它创建了一个虚拟 DIV，它永远不会附加到文档中，因此不会显示。该节点从其父节点中删除并附加到虚拟节点。然后用 innerHTML 将其清除。

但是 - 如果您仍然有对节点的变量引用，这将失败。您应该使用一个好的 Ajax 库并且只使用适当的 addEventListener 来附加事件。你不应该这样做：

<div onclick="myFunction();">click me</div>

因为它不是一个很好的关注点分离，它很难维护，它不能正确传递事件，你只能附加一个方法。如果你这样做，你基本上需要自己进行垃圾收集。

【讨论】：

【解决方案2】：

我不知道我是否完全理解您想要的最终结果，但是将 div 的 innerHTML 设置为空白屏幕可以有效地摆脱所有子节点：

document.getElementById('test').innerHTML = '';

【讨论】：

【解决方案3】：

你可以这样做：

function removeChildren(elem){
    for(var i in elem.children){
        removeChildren(elem.children[i])
        elem.removeChild(elem.children[i])
    }
}
OR
function removeChildren(elem){
    while (elem.hasChildNodes()) {
        removeChildren(elem.lastChild)
        elem.removeChild(elem.lastChild);
    }
}

后一种选择可能更好。

【讨论】：