blocks|key|1116077|text|如果您使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116078|$('#foo').empty();|code-block|syntax|javascript|1116079|如果您不这样做：|1116080|var+foo+=+document.getElementById('foo');
while+(foo.firstChild)+foo.removeChild(foo.firstChild);|1116081|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you use jQuery:

<pre><code>$('#foo').empty();
</code></pre>

If you don't:

<pre><code>var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);
</code></pre>

blocks|key|901401|text|最快的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|901402|var+removeChilds+=+function+(node)+{
++++var+last;
++++while+(last+=+node.lastChild)+node.removeChild(last);
};|code-block|syntax|javascript|901403|感谢Andrey+Lushnikov的his+link+to+jsperf.com+(很酷的网站！)|offset|length|901404|编辑:需要说明的是，firstChild和lastChild在Chrome上没有性能差异。顶部的答案显示了一个很好的性能解决方案。|901405|entityMap|0|LINK|mutability|MUTABLE|url|http://jsperf.com/innerhtml-vs-removechild/15^0|0|0|J|M|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

The fastest...

<pre><code>var removeChilds = function (node) {
 var last;
 while (last = node.lastChild) node.removeChild(last);
};
</code></pre>

Thanks to Andrey Lushnikov for <a href="http://jsperf.com/innerhtml-vs-removechild/15" rel="noreferrer">his link to jsperf.com</a> (cool site!).

EDIT: to be clear, there is no performance difference in Chrome between firstChild and lastChild. The top answer shows a good solution for performance.

blocks|key|902382|text|使用elm.replaceChildren()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|902383|它是实验性的，没有广泛的支持，但在没有参数的情况下执行时，它将执行您所要求的操作，而且它比遍历每个子对象并删除它更有效。如前所述，用空字符串替换innerHTML将需要浏览器进行超文本标记语言解析。|902384|MDN+Documentation。|902385|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren^0|2|L|0|20|9|0|0|H|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

Use <code>elm.replaceChildren()</code>.
It’s experimental without wide support, but when executed with no params will do what you’re asking for, and it’s more efficient than looping through each child and removing it. As mentioned already, replacing <code>innerHTML</code> with an empty string will require HTML parsing on the browser’s part.
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren" rel="nofollow noreferrer">MDN Documentation</a>.

blocks|key|901320|text|如果您只想拥有没有其子节点的节点，您也可以像这样复制它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|901321|var+dupNode+=+document.getElementById("foo").cloneNode(false);|code-block|syntax|javascript|901322|这取决于你想要实现的目标。|901323|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you only want to have the node without its children you could also make a copy of it like this:

<pre><code>var dupNode = document.getElementById("foo").cloneNode(false);
</code></pre>

Depends on what you're trying to achieve.

blocks|key|1116293|text|这是另一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116294|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();
}|code-block|syntax|javascript|1116295|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's another approach:

<pre><code>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();
}
</code></pre>

blocks|key|901554|text|element.textContent+=+'';|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|901555|它类似于innerText，只不过是标准的。它是a+bit+slower而不是removeChild()，但它更容易使用，如果你没有太多东西要删除，那么它不会对性能产生太大的影响。|unstyled|offset|length|style|CODE|901556|entityMap|0|LINK|mutability|MUTABLE|url|http://jsperf.com/so-remove-children^0|0|13|D|O|C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@$G|U|H|V|I|J]]|9|@$G|W|H|X|1|Y]]|A|$]]|$1|K|3|-4|5|F|7|Z|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>element.textContent = '';
</code></pre>

It's like innerText, except standard. It's <a href="http://jsperf.com/so-remove-children">a bit slower</a> than <code>removeChild()</code>, but it's easier to use and won't make much of a performance difference if you don't have too much stuff to delete.

blocks|key|902100|text|这是我通常做的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|902101|HTMLElement.prototype.empty+=+function()+{
++++while+(this.firstChild)+{
++++++++this.removeChild(this.firstChild);
++++}
}|code-block|syntax|javascript|902102|然后，稍后您可以使用以下命令清空任何dom元素：|902103|anyDom.empty()|902104|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here is what I usually do :

<pre><code>HTMLElement.prototype.empty = function() {
 while (this.firstChild) {
 this.removeChild(this.firstChild);
 }
}
</code></pre>

And voila, later on you can empty any dom element with :

<pre><code>anyDom.empty()
</code></pre>

blocks|key|1116173|text|为了回应DanMan，马腾和马特。克隆一个节点，设置文本，在我的结果中确实是一种可行的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116174|//+@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+);|code-block|syntax|javascript|1116175|这也适用于不在dom中的节点，这些节点在尝试访问parentNode时返回null。另外，如果你需要保证安全，在添加内容之前节点是空的，这是非常有用的。考虑下面的用例。|1116176|//+@param+{node}+node
//+@param+{string%7Chtml}+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+);|1116177|我发现这个方法在替换元素中的字符串时非常有用，如果你不确定节点将包含什么，而不是担心如何清理乱七八糟的东西，重新开始。|1116178|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

In response to DanMan, Maarten and Matt. Cloning a node, to set the text is indeed a viable way in my results.

<pre><code>// @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 );
</code></pre>

Also this works for nodes not in the dom which return null when trying to access the parentNode. In addition, if you need to be safe a node is empty before adding content this is really helpful. Consider the use case underneath.

<pre><code>// @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 );
</code></pre>

I find this method very useful when replacing a string inside an element, if you are not sure what the node will contain, instead of worrying how to clean up the mess, start out fresh.

blocks|key|902227|text|使用范围循环对我来说是最自然的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|902228|for+(var+child+of+node.childNodes)+{
++++child.remove();
}|code-block|syntax|javascript|902229|根据我在Chrome和Firefox上的测量，它的速度大约慢了1.3倍。在正常情况下，这可能无关紧要。|902230|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Using a range loop feels the most natural to me:

<pre><code>for (var child of node.childNodes) {
 child.remove();
}
</code></pre>

According to my measurements in Chrome and Firefox, it is about 1.3x slower. In normal circumstances, this will perhaps not matter.

blocks|key|901457|text|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
++++++++}
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|901458|这将删除元素中的所有节点。|unstyled|901459|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>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
 }
 }
}
</code></pre>

This will remove all nodes within the element.

blocks|key|1116497|text|有几个选项可以实现这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116498|最快的()：|1116499|while+(node.lastChild)+{
++node.removeChild(node.lastChild);
}|code-block|syntax|javascript|1116500|备选方案(速度较慢)：|1116501|while+(node.firstChild)+{
++node.removeChild(node.firstChild);
}

while+(node.hasChildNodes())+{
++node.removeChild(node.lastChild);
}|1116502|Benchmark+with+the+suggested+options|offset|length|1116503|entityMap|0|LINK|mutability|MUTABLE|url|https://jsperf.com/remove-all-children-from-dom-element/1^0|0|0|0|0|0|0|10|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

There are couple of options to achieve that:

The fastest ():

<pre><code>while (node.lastChild) {
 node.removeChild(node.lastChild);
}
</code></pre>

Alternatives (slower):

<pre><code>while (node.firstChild) {
 node.removeChild(node.firstChild);
}

while (node.hasChildNodes()) {
 node.removeChild(node.lastChild);
}
</code></pre>

<a href="https://jsperf.com/remove-all-children-from-dom-element/1" rel="nofollow noreferrer">Benchmark with the suggested options</a>

blocks|key|901446|text|innerText是赢家！http://jsperf.com/innerhtml-vs-removechild/133。在以前的所有测试中，父节点的内部dom在第一次迭代时被删除，然后应用于空div的innerHTML或removeChild。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|901447|entityMap|0|LINK|mutability|MUTABLE|url|http://jsperf.com/innerhtml-vs-removechild/133^0|D|1A|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

innerText is the winner! <a href="http://jsperf.com/innerhtml-vs-removechild/133" rel="nofollow">http://jsperf.com/innerhtml-vs-removechild/133</a>. At all previous tests inner dom of parent node were deleted at first iteration and then innerHTML or removeChild where applied to empty div.

blocks|key|901491|text|我看到人们在做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|901492|while+(el.firstNode)+{
++++el.removeChild(el.firstNode);
}|code-block|syntax|javascript|901493|然后有人说使用el.lastNode更快|offset|length|style|CODE|901494|然而，我认为这是最快的：|901495|var+children+=+el.childNodes;
for+(var+i=children.length+-+1;+i>-1;+i--)+{
++++el.removeNode(children[i]);
}|901496|你认为如何？|901497|ps:这个话题是我的救命稻草。我的火狐插件被拒绝了，因为我使用了innerHTML。这已经是很长一段时间的习惯了。然后我发现了这个。实际上我注意到了速度的不同。在加载时，innerhtml需要一段时间才能更新，然而，通过addElement它的即时！|901498|entityMap^0|0|0|7|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

i saw people doing:

<pre><code>while (el.firstNode) {
 el.removeChild(el.firstNode);
}
</code></pre>

then someone said using <code>el.lastNode</code> is faster

however I would think that this is the fastest:

<pre><code>var children = el.childNodes;
for (var i=children.length - 1; i&gt;-1; i--) {
 el.removeNode(children[i]);
}
</code></pre>

what do you think?

ps:
this topic was a life saver for me. my firefox addon got rejected cuz i used innerHTML. Its been a habit for a long time. then i foudn this. and i actually noticed a speed difference. on load the innerhtml took awhile to update, however going by addElement its instant!

blocks|key|901627|text|通过Javascript删除节点的子节点的最简单方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|901628|var+myNode+=+document.getElementById("foo");
while(myNode.hasChildNodes())
{
+++myNode.removeChild(myNode.lastChild);
}|code-block|syntax|javascript|901629|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simplest way of removing the child nodes of a node via Javascript

<pre><code>var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
 myNode.removeChild(myNode.lastChild);
}
</code></pre>

blocks|key|1116973|text|+let+el+=+document.querySelector('#el');
+if+(el.hasChildNodes())+{
++++++el.childNodes.forEach(child+=>+el.removeChild(child));
+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1116974|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
 el.childNodes.forEach(child =&gt; el.removeChild(child));
 }
</code></pre>

blocks|key|901862|text|通常，JavaScript使用数组来引用DOM节点列表。因此，如果您对通过HTMLElements数组执行此操作感兴趣，这将会很好地工作。另外，值得注意的是，因为我使用的是数组引用，而不是JavaScript+proto的，所以这应该可以在任何浏览器中工作，包括IE。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|901863|while(nodeArray.length+!==+0)+{
++nodeArray[0].parentNode.removeChild(nodeArray[0]);
}|code-block|syntax|javascript|901864|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Generally, JavaScript uses arrays to reference lists of DOM nodes. So, this will work nicely if you have an interest in doing it through the HTMLElements array. Also, worth noting, because I am using an array reference instead of JavaScript proto's this should work in any browser, including IE.

<pre><code>while(nodeArray.length !== 0) {
 nodeArray[0].parentNode.removeChild(nodeArray[0]);
}
</code></pre>

blocks|key|1116900|text|刚刚看到有人在另一篇文章中提到了这个问题，我想我应该添加一个我还没有见过的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116901|function+clear(el)+{
++++el.parentNode.replaceChild(el.cloneNode(false),+el);
}

var+myNode+=+document.getElementById("foo");
clear(myNode);|code-block|syntax|javascript|1116902|clear函数获取元素，并使用父节点将其自身替换为不带其子节点的副本。如果元素是稀疏的，则不会有太大的性能增益，但当元素有一堆节点时，性能增益就会实现。|1116903|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Just saw someone mention this question in another and thought I would add a method I didn't see yet:

<pre><code>function clear(el) {
 el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);
</code></pre>

The clear function is taking the element and using the parent node to replace itself with a copy without it's children. Not much performance gain if the element is sparse but when the element has a bunch of nodes the performance gains are realized.

blocks|key|902317|text|仅功能方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|902318|const+domChildren+=+(el)+=>+Array.from(el.childNodes)
const+domRemove+=+(el)+=>+el.parentNode.removeChild(el)
const+domEmpty+=+(el)+=>+domChildren(el).map(domRemove)|code-block|syntax|javascript|902319|domChildren中的"childNodes“将给出直接子元素的nodeList，如果没有找到，则为空。为了在数组上映射，domChildren将其转换为nodeList。domEmpty将一个函数domRemove映射到所有删除它的元素上。|902320|示例用法：|902321|domEmpty(document.body)|902322|从body元素中移除所有子元素。|902323|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Functional only approach:

<pre><code>const domChildren = (el) =&gt; Array.from(el.childNodes)
const domRemove = (el) =&gt; el.parentNode.removeChild(el)
const domEmpty = (el) =&gt; domChildren(el).map(domRemove)
</code></pre>

"childNodes" in domChildren will give a nodeList of the immediate children elements, which is empty when none are found. In order to map over the nodeList, domChildren converts it to array. domEmpty maps a function domRemove over all elements which removes it.

Example usage:

<pre><code>domEmpty(document.body)
</code></pre>

removes all children from the body element.

blocks|key|902407|text|我是这样做的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|902408|​|902409|data+=+{
++++"messages":+[
++++++++[0,+"userName",+"message+test"],
++++++++[1,+"userName1",+"message+test1"]
++++]
}
for+(let+i+=+0;+i+<+data.messages.length;+i%2B%2B)+{
++++var+messageData+=+document.createElement('span')
++++messageData.className+=+'messageClass'
++++messageData.innerHTML+=+`${data.messages[i][2]}+${'<br+/>'}`
++++$(".messages").append(messageData)
}

$('#removeMessages').on('click',+()+=>+{
++++node+=+$('.messages').get(0)
++++while+(node.firstChild)+{
++++++++node.firstChild.remove()
++++}
++++$('#removeMessages').toggle(500)
++++$('#addMessages').toggle(500)
})

$('#addMessages').on('click',+()+=>+{
++++for+(let+i+=+0;+i+<+data.messages.length;+i%2B%2B)+{
++++++++var+messageData+=+document.createElement('span')
++++++++messageData.className+=+'messageClass'
++++++++messageData.innerHTML+=+`${data.messages[i][2]}+${'<br+/>'}`
++++++++$(".messages").append(messageData)
++++}
++++$('#addMessages').toggle(500)
++++$('#removeMessages').toggle(500)
})|code-block|syntax|javascript|902410|#addMessages{
++display:none;
}|902411|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div+class="messages"></div>
<button+type='button'+id="removeMessages">Remove</button>
<button+type='button'+id="addMessages">Add+MEssages</button>|902412|902413|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

I did it like this
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>data = {
 "messages": [
 [0, "userName", "message test"],
 [1, "userName1", "message test1"]
 ]
}
for (let i = 0; i &lt; data.messages.length; i++) {
 var messageData = document.createElement('span')
 messageData.className = 'messageClass'
 messageData.innerHTML = `${data.messages[i][2]} ${'&lt;br /&gt;'}`
 $(".messages").append(messageData)
}

$('#removeMessages').on('click', () =&gt; {
 node = $('.messages').get(0)
 while (node.firstChild) {
 node.firstChild.remove()
 }
 $('#removeMessages').toggle(500)
 $('#addMessages').toggle(500)
})

$('#addMessages').on('click', () =&gt; {
 for (let i = 0; i &lt; data.messages.length; i++) {
 var messageData = document.createElement('span')
 messageData.className = 'messageClass'
 messageData.innerHTML = `${data.messages[i][2]} ${'&lt;br /&gt;'}`
 $(".messages").append(messageData)
 }
 $('#addMessages').toggle(500)
 $('#removeMessages').toggle(500)
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#addMessages{
 display:none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="messages"&gt;&lt;/div&gt;
&lt;button type='button' id="removeMessages"&gt;Remove&lt;/button&gt;
&lt;button type='button' id="addMessages"&gt;Add MEssages&lt;/button&gt;</code></pre>
</div>
</div>

blocks|key|1116143|text|jQuery中的其他方式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116144|var+foo+=+$("#foo");
foo.children().remove();
//or
$("*",+foo+).remove();
//or
foo.html("");
//or
foo.empty();|code-block|syntax|javascript|1116145|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Other ways in jQuery

<pre><code>var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();
</code></pre>

blocks|key|901700|text|简单地只使用IE：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|901701|parentElement.removeNode(true);|code-block|syntax|javascript|901702|true+-意味着执行深度删除-这意味着所有子级也将被删除|offset|length|style|CODE|901703|entityMap^0|0|0|0|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

simply only IE:

<pre><code>parentElement.removeNode(true);
</code></pre>

<code>true</code> - means to do deep removal - which means that all child are also removed

blocks|key|1116663|text|最简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116664|let+container+=+document.getElementById("containerId");
container.innerHTML+=+"";|code-block|syntax|javascript|1116665|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The easiest way:

<pre><code>let container = document.getElementById("containerId");
container.innerHTML = "";
</code></pre>

blocks|key|1116758|text|简单快速地使用for循环！！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116759|var+myNode+=+document.getElementById("foo");

++++for(var+i+=+myNode.childNodes.length+-+1;+i+>=+0;+--i)+{
++++++myNode.removeChild(myNode.childNodes[i]);
++++}|code-block|syntax|javascript|1116760|这在标签中不起作用！|offset|length|style|CODE|1116761|entityMap^0|0|0|2|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

simple and fast using for loop!!

<pre><code>var myNode = document.getElementById("foo");

 for(var i = myNode.childNodes.length - 1; i &gt;= 0; --i) {
 myNode.removeChild(myNode.childNodes[i]);
 }
</code></pre>

this will not work in <code>&lt;span&gt;</code> tag!

blocks|key|901945|text|如果您想把一些东西放回div中，innerHTML可能更好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|901946|我的例子：|901947|<ul><div+id="result"></div></ul>

<script>
++function+displayHTML(result){
++++var+movieLink+=+document.createElement("li");
++++var+t+=+document.createTextNode(result.Title);
++++movieLink.appendChild(t);
++++outputDiv.appendChild(movieLink);
++}
</script>|code-block|syntax|javascript|901948|如果我使用.firstChild或.lastChild方法，displayHTML()函数随后将不起作用，但.innerHTML方法则没有问题。|901949|entityMap^0|B|3|G|9|0|0|0|5|B|H|A|U|D|1I|A|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|P|$]]

If you want to put something back into that <code>div</code>, the <code>innerHTML</code> is probably better.

My example:

<pre><code>&lt;ul&gt;&lt;div id="result"&gt;&lt;/div&gt;&lt;/ul&gt;

&lt;script&gt;
 function displayHTML(result){
 var movieLink = document.createElement("li");
 var t = document.createTextNode(result.Title);
 movieLink.appendChild(t);
 outputDiv.appendChild(movieLink);
 }
&lt;/script&gt;
</code></pre>

If I use the <code>.firstChild</code> or <code>.lastChild</code> method the <code>displayHTML()</code> function doesnt work afterwards, but no problem with the <code>.innerHTML</code> method.

blocks|key|1116562|text|这是一个纯javascript，我没有使用jQuery，但它可以在所有浏览器中工作，甚至IE，它非常简单易懂|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1116563|+++<div+id="my_div">
++++Paragraph+one
++++Paragraph+two
++++Paragraph+three
+++</div>
+++<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%2B%2B)+{
+++++//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+="";

})|code-block|syntax|javascript|1116564|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is a pure javascript i am not using jQuery but works in all browser even IE and it is verry simple to understand

<pre><code> &lt;div id="my_div"&gt;
 &lt;p&gt;Paragraph one&lt;/p&gt;
 &lt;p&gt;Paragraph two&lt;/p&gt;
 &lt;p&gt;Paragraph three&lt;/p&gt;
 &lt;/div&gt;
 &lt;button id ="my_button&gt;Remove nodes ?&lt;/button&gt;

 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 &lt; 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 ="";

})
</code></pre>

blocks|key|901264|text|使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|901265|$("#foo").find("*").remove();|code-block|syntax|javascript|901266|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

with jQuery :

<pre><code>$("#foo").find("*").remove();
</code></pre>

How would I go about removing all of the child elements of a DOM node in JavaScript?

Say I have the following (ugly) HTML:

<pre><code>&lt;p id="foo"&gt;
 &lt;span&gt;hello&lt;/span&gt;
 &lt;div&gt;world&lt;/div&gt;
&lt;/p&gt;
</code></pre>

And I grab the node I want like so:

<pre><code>var myNode = document.getElementById("foo");
</code></pre>

How could I remove the children of <code>foo</code> so that just <code>&lt;p id="foo"&gt;&lt;/p&gt;</code> is left?

Could I just do:

<pre><code>myNode.childNodes = new Array();
</code></pre>

or should I be using some combination of <code>removeElement</code>?

I'd like the answer to be straight up DOM; though extra points if you also provide an answer in jQuery along with the DOM-only answer.

Remove all child elements of a DOM node in JavaScript

jQuery

如何在JavaScript中删除DOM节点的所有子元素？假设我有以下(难看的) HTML： hello <div>world</div>然后我像这样抓取我想要的节点：var myNode = document.getElementById("foo");怎样才能删除foo的子节点，只剩下？我能不能

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

回答 26

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 26

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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