如何在JavaScript中删除DOM节点的所有子元素?
假设我有以下(丑陋的)HTML:
<p id="foo">
<span>hello</span>
<div>world</div>
</p>
然后我像这样获取我想要的节点
var myNode = document.getElementById("foo");
我怎么能删除foo的孩子，这样就<p id="foo"></p>是剩下的?
我能不能这样做:
myNode.childNodes = new Array();
或者我应该使用一些组合的removeElement?
我希望答案是直接的DOM;不过，如果你在jQuery中提供了一个dom专用的答案，会有额外的加分。
当前回答
通过Javascript删除节点的子节点的最简单方法
var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
myNode.removeChild(myNode.lastChild);
}
其他回答
如果你想清空整个父DOM，那么很简单…
只需使用.empty()
函数removeAll() { $(' #父母')空虚(); ｝ < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> <按钮onclick = " removeAll ()>删除parent</button的所有元素 < div id = "父" > 标题< h3 > < / h3 > 儿童1 < p > < / p > 儿童2 < p > < / p > 孩子< p > 3 < / p > < / div >
let el = document.querySelector('#el');
if (el.hasChildNodes()) {
el.childNodes.forEach(child => el.removeChild(child));
}
最快的…
var removeChilds = function (node) {
var last;
while (last = node.lastChild) node.removeChild(last);
};
感谢Andrey Lushnikov提供的jsperf.com链接(很酷的网站!)
编辑:需要明确的是，在Chrome中，firstChild和lastChild之间没有性能差异。上面的答案显示了一个很好的性能解决方案。
innerText是赢家!http://jsperf.com/innerhtml-vs-removechild/133。在所有之前的测试中，父节点的内部dom在第一次迭代时被删除，然后innerHTML或removecchild应用于空div。
使用range循环对我来说是最自然的:
for (var child of node.childNodes) {
child.remove();
}
根据我在Chrome和Firefox中的测量，它要慢1.3倍左右。在正常情况下，这或许无关紧要。
