在JavaScript中删除DOM节点的所有子元素

Remove all child elements of a DOM node in JavaScript

如何删除javascript中DOM节点的所有子元素？

假设我有以下(丑陋的)HTML：

1
2
3
4
5

hello
world

我抓取我想要的节点，就像这样：

1	var myNode = document.getElementById("foo");

我怎样才能去掉EDOCX1的子代(0)，只剩下EDOCX1的子代(1)？

我可以这样做吗：

1	myNode.childNodes = new Array();

还是应该使用removeElement的组合？

我希望答案是直接向上的dom；不过，如果您在jquery中也提供了答案以及dom-only答案，则需要额外的分数。

选项1(速度慢得多，请参阅下面的注释)：

1 2	var myNode = document.getElementById("foo"); myNode.innerHTML = '';

选项2(更快)：

1
2
3
4

var myNode = document.getElementById("foo");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}

相关讨论

从jquery可以考虑这两个问题：这个方法不仅删除子元素(和其他子元素)，还删除匹配元素集中的任何文本。这是因为，根据DOM规范，元素中的任何文本字符串都被视为该元素的子节点。以及"为了避免内存泄漏，jquery在删除元素之前从子元素中删除了其他构造，如数据和事件处理程序。"
@请注意：实际上，innerhtml要慢得多！jspef.com/innerhtml-vs-removechild
@我认为你的测试不正确。我写了一篇关于jsfidle(jsfiddle.net/6K6mv/5)的文章，结果如下。while:14ms；innerhtml:7ms；textcontent:7ms
@M93A：在6毫秒到11毫秒的时间里，多次使用你的小提琴都会给我带来结果，这基本上没什么。对于同一个测试，结果比每个测试运行之间的ms方差更接近。记录：它不是我的脚本，它的jspef.com。看看这个，更好地理解测试结果：stackoverflow.com/a/5262617/859877和stackoverflow.com/questions/4986245/jspef如何工作/&hellip；
@是的，我知道测试结果是什么意思，但看起来很奇怪。它显示了我的内心是98%-99%的慢。我的测试结果却恰恰相反。但这不是聊天，我要离开讨论。
顺便说一句，使用lastchild似乎更有效jspef.com/innerhtml-vs-removechild/15
只有在处理HTML时，InnerHTML才有效。如果内部有SVG，则只需拆除元件即可。
永远不要使用innerhtml=''。不要这样做。问题是这些项看起来像是被删除了，但是在内部，节点仍然存在并降低了速度。出于某种原因，必须删除所有单个节点。在Google Chrome和IE中测试过。请考虑删除InnerHTML"解决方案"，因为它是错误的。
@micha jspef.com/innerhtml-vs-removechild/151使用.remove()更快。
@乔伊特耶50好极了！不幸的是，它是DOM4，并不是所有地方都有。为了更好的兼容性，我坚持使用.removeChild()。另外，.remove()的收益仅为2%。
我喜欢人们真的测试它的效率！
我把它放在原型中以便更容易地使用它：element.prototype.clear=function()while(this.firstchild)this.removechild(this.firstchild)；
@Kenji-如果我做document.documentElement.replaceChild(newBody, document.body)怎么办？"旧"元素及其事件会在内存中持久存在吗？(更换整个车身元件时)
@安德烈·卢什尼科夫：取决于哪个浏览器和哪个版本。实际上，firstchild是最好的整体：jspef.com/innerhtml-vs-removechild/250
@我不相信Kenji的评论是有根据的。做innerHTML = ''比较慢，但我不认为这是"错误的"。任何关于内存泄漏的声明都应该有证据支持。
@安德烈·卢什尼科夫的《第一个孩子》和《最后一个孩子》在我的Chrome43.0.2357.52上是相当的(第一轮的removechildfirst比第一轮快一点，第二轮的removechildlast赢了)，但两人都是InnerHTML的赢家。
@Kenji，当然浏览器足够智能，可以防止内存泄漏。您是否设法导致浏览器内存泄漏？
您的示例没有错，但我认为在这个答案中有一个很好的例子，JSPerf测试有缺陷，并且没有度量它应该做什么。(链接答案中的声明是，它们只是删除空的div，因为它们错误地假定将在每个测试之间重新填充dom。)换句话说，innerhtml更快，而且还有更快的方法(用空的节点替换节点)。既然你的答案是如此的高调，如果你能恢复这一部分就好了。
@算盘要小心操作，确保你的目标用户的浏览器可以使用它。perfectionkills.com/whats-wrong-with-extending-the-dom
函数emptylement(element)var mynode=element；while(mynode.firstchild)mynode.removechild(mynode.firstchild)；emptylement(document.body)
(假设它是真的)在答案中有理由是很好的。
我试过myNode.childNodes.forEach(function (c) { c.remove() })，但这并不能消除所有的孩子。我意识到有些浏览器不支持这个方法，但是对于那些支持它的浏览器，它不会删除所有的节点。为什么while循环比NodeList#forEach()循环工作得更好？
@chharvey您正在修改一个集合，当您以这种方式使用foreach时，您将主动迭代该集合。
这太荒谬了。为什么性能在这里很重要？是120 fps还是一次性操作？
我同意@michalstefanow。在这种情况下，代码的简单性应该先于最小的性能增益，除非您正在处理一个需要这种精细优化级别的特定场景。在删除5-15个节点时不会有什么不同。

当前接受的答案是错误的，因为innerhtml速度较慢(至少在IE和Chrome中)，正如M93A正确提到的。

chrome和ff使用此方法的速度显著加快(这将破坏附加的jquery数据)：

1 2	var cNode = node.cloneNode(false); node.parentNode.replaceChild(cNode ,node);

在远处的一秒钟内出现FF和Chrome，在IE中最快：

1	node.innerHTML = '';

InnerHTML不会破坏事件处理程序或中断jquery引用，这里还建议将其作为解决方案：https://developer.mozilla.org/en-us/docs/web/api/element.innerhtml网站

最快的DOM操作方法(仍然比前两种方法慢)是删除范围，但直到IE9才支持范围。

1
2
3

var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();

上面提到的其他方法似乎具有可比性，但比innerhtml慢得多，除了离群值jquery(1.1.1和3.1.1)，它比其他方法慢得多：

1	$(node).empty();

证据如下：

http://jspef.com/innerhtml vs removechild/167~~http://jspef.com/innerhtml vs removechild/300~~https://jspef.com/remove-all-child-elements-of-a-dom-node-in-javascript(因为编辑旧的URL不起作用，所以jsper重新启动的新URL)~~~~

~~JSperf的"每个测试循环"通常被理解为"每个迭代"，只有第一个迭代有要删除的节点，所以结果是无意义的，在发布时，这个线程中的测试设置不正确。~~

相关讨论

您的JSPERF完全损坏。这不是很好的证据。

感谢您注意到，修复了它，insertbefore spec更改了，最后一个参数不再使用undefined。

这是目前最好的答案。这条线中的其他一切都是假的！！)谢谢你把那些不好的旧测试都清理干净。

"innerhtml不会破坏您的事件处理程序或破坏任何jquery引用"，它将孤立保存在jQuery.cache中的数据，导致内存泄漏，因为管理该数据的唯一可用引用是在刚刚破坏的元素上。

"innerhtml不会破坏事件处理程序，也不会破坏任何jquery引用"，它指的是容器，而不是子容器。cloneNode关闭容器，这意味着不维护对容器的引用(jquery或其他)。如果有jquery数据附加到元素上，jquery的缓存可能会使使用jquery删除元素变得有价值。希望他们在某个时候切换到weakmaps。清理(甚至存在)$.cache似乎没有正式记录。

jspef离线，如果你有测试代码，你介意把它上传到这里吗？我会同意的！

我没有代码，但jspef在waybackmachine web.archive.org/web/20151008164028/http://jspef.com/&hellip；

只是一个随机查询：为什么您的基准测试包含用于设置将在基准测试部分内删除的数据的代码？当然，设置应该在基准之外完成，但是所有基准都从测试中调用refreshRange()(它将一组测试数据克隆到一个新节点中)。你怎么能确定这不会影响结果呢？

另外，为什么在jquery测试中使用contents().remove()(它构建所有子节点的内部列表，然后删除它们)而不是empty()(它只删除它们)？

仍然不是一个适当的基准IMO。应该用附加的事件、属性、函数等来生成节点。更现实的基准。在某种意义上，removechild将删除附加的资源，而innerhtml可能不会，因此速度较慢，但是如果在没有任何附加资源的情况下进行基准测试，则没有意义。

迷失@ periatabreatta the jsperf的意见是什么，但我referring was only to about破性清除盎司测试表演。jsperf' S"-测试-环understood as often"得到"迭代"，然后迭代does any only the first and the results are meaningless工件。它的理想摇篮集在后续迭代of to，but as is the same as the setup Long & the results are meaningful minimized，相关。我不知道(about，thanks for the empty)11头，修好它。

gregoired @。我不是真的在requested信息的问题，我认为在关注大的innerHTML for the nodes is probably memory usage除尘性能和超过泄密，将在premise漏试验在jsperf which has to不洁净的能力会对后续的迭代结果skewing probably the end

茶叶是这里jsperf破碎试验。测试报告：the following the engine"recreated DOM节点误差：测试结果在不iterations，meaningless will be"。

cloneNode(false)is but the superfast问题是真的，因为它的破坏王，你要你的基准变量，which is a大罚，例如：jsperf.com innerHTML removechild / / VS - 467

1
2
3
4
5
6
7
var myNode = document.getElementById("foo");
var fc = myNode.firstChild;

while( fc ) {
myNode.removeChild( fc );
fc = myNode.firstChild;
}

如果您有任何机会让jquery影响后代，那么您必须使用一些方法来清理jquery数据。

1
$('#foo').empty();

jquery .empty()方法将确保清除jquery与要删除的元素相关联的任何数据。
如果只使用DOM方法删除子对象，那么数据将保留。

相关讨论

InnerHTML方法是迄今为止性能最好的方法。也就是说，jquery的.empty()正在清理的数据：使用递归循环(缓慢，但可能显著减少内存使用)消除jquery中与子标记关联的数据()，如果在没有jquery的情况下附加事件(如使用.onclick=)，则可防止内存泄漏。。如果要删除的子级中没有此类事件，则设置innerhtml不会泄漏。所以最好的答案是——这要看情况而定。

InnerHTML的性能不高！jspef.com/innerhtml-vs-removechild

为什么不直接将第一个子表达式放入while循环的条件中呢？while ( myNode.firstChild ) {

while(fc = myNode.firstChild){ myNode.removeChild(fc); }

如果使用jquery：

1
$('#foo').empty();

如果你不这样做：

1
2
var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

使用现代的javascript，与remove！

1
2
3
4
const parent = document.getElementById("foo");
while (parent.firstChild) {
parent.firstChild.remove();
}

这是一种在ES5中写入节点删除的新方法。它是普通的JS，读起来比以前的版本好得多。
大多数用户应该有现代的浏览器，或者你可以在需要的时候发泄出来。
浏览器支持-2019年4月93%

相关讨论

Will not the work for循环是因为parent.children LIVE / parent.childnodes remove the list列表；modifies电话和你的迭代器，迭代过therefore移调to不是一切。在浏览器端，例如，你skipping每其他节点上。更好的while (parent.firstChild) { parent.removeChild(parent.firstChild); }环使用。developer.mozilla.org /销售额/文档/网站/蜜蜂/儿童/ parentnode developer.mozilla.org /销售额/文档/蜜蜂/节点/网络/ childnodes

酷shorthand少，尽管while (parent.firstChild && !parent.firstChild.remove());可读：

一个眼线for when性能不是在巨大的[...parent.childNodes].forEach(el => el.remove());新政：

在typescript this does not work…而不是使用while (selectElem.firstElementChild) { selectElem.firstElementChild.remove(); }

最快的…

1
2
3
4
var removeChilds = function (node) {
var last;
while (last = node.lastChild) node.removeChild(last);
};

感谢Andrey Lushnikov提供的jspef.com链接(酷网站！).
编辑：要清楚，firstchild和lastchild在chrome中没有性能差异。上面的答案显示了一个很好的性能解决方案。

相关讨论

同样没有lint警告：clear:function(container)for(；)var child=container.lastchild；if(！child)break；container.removechild(child)；

如果只想让节点不带子节点，也可以这样复制它：

1
var dupNode = document.getElementById("foo").cloneNode(false);

取决于你想要达到的目标。

相关讨论

也许你甚至可以跟parent.replaceChild(cloned, original)一起做？这可能比一个接一个地删除子项要快，并且应该处理所有支持DOM的内容(所以每种类型的XML文档，包括SVG)。设置innerhtml也可能比一个接一个地删除子级要快，但除了HTML文档外，这不适用于任何内容。应该测试一下。

这不会复制使用addEventListener添加的事件侦听器。

如果你能接受这种限制，那肯定是很快的：jspef.com/innerhtml-vs-removechild/137

1
element.textContent = '';

除了标准外，它和InnerText很像。它比removeChild()慢一点，但是它更容易使用，如果没有太多要删除的内容，也不会对性能产生太大影响。

相关讨论

文本节点不是元素

不，但是代码对我来说很好。

对不起，你说得对，它确实删除了所有子元素

这在旧版本的Internet Explorer中不起作用。

另一种方法是：

1
2
3
4
5
6
7
8
9
10
11
function removeAllChildren(theParent){

// Create the Range object
var rangeObj = new Range();

// Select all of theParent's children
rangeObj.selectNodeContents(theParent);

// Delete everything that is selected
rangeObj.deleteContents();
}

相关讨论

这很有趣，但与其他方法相比似乎相当慢：jspef.com/innerhtml-vs-removechild/256

作为对丹曼、马顿和马特的回应。克隆一个节点，设置文本在我的结果中确实是一种可行的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
var shell;
// do not copy the contents
shell = node.cloneNode(false);

if (node.parentNode) {
node.parentNode.replaceChild(shell, node);
}

return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

这也适用于不在dom中的节点，这些节点在尝试访问parentnode时返回空值。此外，如果需要确保安全，则在添加内容之前节点是空的，这非常有用。考虑下面的用例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
var shell;
// do not copy the contents
shell = node.cloneNode(false);

// use innerHTML or you preffered method
// depending on what you need
shell.innerHTML( content );

if (node.parentNode) {
node.parentNode.replaceChild(shell, node);
}

return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

当替换元素中的字符串时，我发现这个方法非常有用，如果您不确定节点将包含什么，那么不用担心如何清理混乱，而是从新开始。

相关讨论

有史以来最糟糕的事。如果将原始节点替换为其克隆，则会丢失对原始节点的引用。所有事件处理程序和其他绑定都不起作用。

我看到人们在做：

1
2
3
while (el.firstNode) {
el.removeChild(el.firstNode);
}

然后有人说使用el.lastNode更快
不过，我认为这是最快的：

1
2
3
4
var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
el.removeNode(children[i]);
}

你怎么认为？
PS：这个话题对我来说是个救命稻草。我的火狐插件被拒绝了，因为我使用了innerhtml。长期以来它一直是一种习惯。然后我发现了这个。实际上我注意到了一个速度差。加载时，innerhtml花了一段时间进行更新，但是addelement会立即更新！

相关讨论

好吧，我想不管是不是最快，一些JSPERF测试都可以证明这两种情况

非常好，谢谢你的测试。不过，它们不包括for (var i=0...一个。但我在运行这些测试时得到的是：i.imgur.com/mn61ami.png，所以在这三个测试中，firstnode比lastnode和innerhtml更快，这真的很酷。

我添加了测试：jspef.com/innerhtml-vs-removechild/220做el.firstnode方法的有趣的事情看起来是最快的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var empty_element = function (element) {

var node = element;

while (element.hasChildNodes()) { // selected elem has children

if (node.hasChildNodes()) { // current node has children
node = node.lastChild; // set current node to child
}
else { // last child found
console.log(node.nodeName);
node = node.parentNode; // set node to parent
node.removeChild(node.lastChild); // remove last node
}
}
}

这将删除元素中的所有节点。

相关讨论

…因为这是不必要的复杂，而且没有解释它是如何工作的(实际上这是不明显的)，我怀疑。

实现这一点有两种选择：
最快()：

1
2
3
while (node.lastChild) {
node.removeChild(node.lastChild);
}

备选方案(较慢)：

1
2
3
4
5
6
7
while (node.firstChild) {
node.removeChild(node.firstChild);
}

while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}

以建议的选项为基准

使用范围循环对我来说最自然：

1
2
3
for (var child of node.childNodes) {
child.remove();
}

根据我在Chrome和Firefox上的测量，它慢了1.3倍。在正常情况下，这也许无关紧要。

通过javascript删除节点子节点的最简单方法

1
2
3
4
5
var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
myNode.removeChild(myNode.lastChild);
}

我通常做的是：

1
2
3
4
5
HTMLElement.prototype.empty = function() {
while (this.firstChild) {
this.removeChild(this.firstChild);
}
}

和voila，稍后您可以使用以下命令清空任何dom元素：

1
anyDom.empty()

InnerText是赢家！http://jspef.com/innerhtml-vs-removechild/133。在所有以前的测试中，父节点的内部dom在第一次迭代时被删除，然后在应用于空的div时被innerhtml或removechild删除。

相关讨论

不过，innerText是一种专有的MS产品。只是说。

很肯定这是一个有缺陷的测试——它依赖于box不是作为var，而是通过基于id的dom查找来提供，而且由于while循环使得这个缓慢的调用多次受到惩罚。

通常，javascript使用数组来引用dom节点列表。因此，如果您有兴趣通过htmlelements数组来实现这一点，那么这将很好地工作。另外，值得注意的是，因为我使用的是数组引用，而不是javascript协议，这应该在任何浏览器中都可以使用，包括IE。

1
2
3
while(nodeArray.length !== 0) {
nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

为什么我们不按照最简单的方法来"删除"这个循环。

1
2
3
4
const foo = document.querySelector(".foo");
while (foo.firstChild) {
foo.firstChild.remove();
}

选择父分区

在while循环中使用"remove"方法来消除第一个子元素，直到没有剩余元素为止。

相关讨论

请解释你的代码，用户可以知道其他的公司了解其功能性。谢谢！

ignacioara戴蒙@！

刚刚看到有人在另一个问题中提到这个问题，并认为我会添加一个我还没有看到的方法：

1
2
3
4
5
6
function clear(el) {
el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

clear函数接受元素，并使用父节点将其自身替换为不带子节点的副本。如果元素是稀疏的，则性能增益不大，但是当元素具有多个节点时，性能增益就实现了。

相关讨论

其实，似乎它在上述stackoverflow.com 576767 15441725 / / /

必须有错过，费利克斯，thanks for the校正+ 1。

最简单的方法：

1
2
let container = document.getElementById("containerId");
container.innerHTML ="";

相关讨论

本厂container.innerHTML = null-随你便，我，会让Internet Explorer显示nullthe text。我知道，this does not remove the Children的真的，我说。

仅仅是IE：

1
parentElement.removeNode(true);

true表示进行深度切除，也就是说所有的孩子都被切除。

相关讨论

IE浏览器？这是21世纪！

jquery中的其他方法

1
2
3
4
5
6
var foo = $("#foo");
foo.children().remove();
or
$("*", foo ).remove();
or
foo.html("");

相关讨论

投反对票，因为OP说直接在国内的答案是首选。

另外，jquery有.empty()方法，只要$("#foo").empty()就足够了。

简单快速的循环使用！！

1
2
3
4
5
var myNode = document.getElementById("foo");

for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
myNode.removeChild(myNode.childNodes[i]);
}

这在标签中不起作用！

相关讨论

首先是在队列的解决方案不标签除尘

如果你想把东西放回那个div，innerHTML可能更好。
我的例子：

1
2
3
4
5
6
7
8
9
10
11
12
<ul>

</ul>

function displayHTML(result){
var movieLink = document.createElement("li");
var t = document.createTextNode(result.Title);
movieLink.appendChild(t);
outputDiv.appendChild(movieLink);
}

如果我使用.firstChild或.lastChild方法，那么displayHTML()函数在随后不会工作，但对.innerHTML方法没有问题。

这是一个纯粹的javascript，我不使用jquery，但在所有浏览器中都可以使用，甚至是IE，而且非常容易理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Paragraph one


Paragraph two


Paragraph three


<button id ="my_button>Remove nodes ?</button>

document.getElementById("my_button").addEventListener("click",function(){

let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs

//Let find numbers of child inside the div then remove all
for(var i =0; i < parent_node.childNodes.length; i++) {
//To avoid a problem which may happen if there is no childNodes[i]
try{
if(parent_node.childNodes[i]){
parent_node.removeChild(parent_node.childNodes[i]);
}
}catch(e){
}
}

})

or you may simpli do this which is a quick way to do

document.getElementById("my_button").addEventListener("click",function(){

let parent_node =document.getElemetById("my_div");
parent_node.innerHTML ="";

})

使用jQuery：

1
$("#foo").find("*").remove();

相关讨论

$('#foo').children().remove()更符合逻辑

转换JavaScript字符串为全小写?

如何从javascript对象中删除属性？

如何在调试时或从JavaScript代码中在DOM节点上查找事件侦听器？

关于javascript：我如何找出哪个DOM元素具有焦点？

regex:如何替换JavaScript中出现的所有字符串

获取javascript数组中的所有唯一值(删除重复项)

如何从javascript中的数组中删除特定元素？