如何在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专用的答案，会有额外的加分。
当前回答
var myNode = document.getElementById("foo");
var fc = myNode.firstChild;
while( fc ) {
myNode.removeChild( fc );
fc = myNode.firstChild;
}
如果您的后代有可能受到jQuery影响，那么您必须使用一些方法来清理jQuery数据。
$('#foo').empty();
jQuery .empty()方法将确保任何与被删除的元素相关联的jQuery数据将被清除。
如果您只是使用DOM方法删除子元素，那么这些数据将会保留。
其他回答
简单快速使用for循环!!
var myNode = document.getElementById("foo");
for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
myNode.removeChild(myNode.childNodes[i]);
}
这将在<span>标签不起作用!
使用elm.replaceChildren()。
它是实验性的，没有广泛的支持，但当不带参数执行时，它会做你所要求的，而且它比遍历每个子节点并删除它更有效。如前所述，用空字符串替换innerHTML将需要浏览器进行HTML解析。
MDN文档
它现在得到了广泛的支持
用jQuery:
$("#foo").find("*").remove();
这是另一种方法:
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();
}
ES6+浏览器(2016年之后发布的主要浏览器)的最佳删除方法:
也许有很多方法可以做到这一点，例如Element.replaceChildren()。 我想向您展示一个有效的解决方案，只有一个重绘和回流，支持所有ES6+浏览器。
function removeChildren(cssSelector, parentNode){
var elements = parentNode.querySelectorAll(cssSelector);
let fragment = document.createDocumentFragment();
fragment.textContent=' ';
fragment.firstChild.replaceWith(...elements);
}
用法:removeChildren('.foo'，document.body);:删除<body>中所有className为foo的元素
