如何在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专用的答案，会有额外的加分。
当前回答
innerText是赢家!http://jsperf.com/innerhtml-vs-removechild/133。在所有之前的测试中，父节点的内部dom在第一次迭代时被删除，然后innerHTML或removecchild应用于空div。
其他回答
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
}
}
}
这将删除元素中的所有节点。
如果你使用jQuery:
$('#foo').empty();
如果你没有:
var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);
如果你想把一些东西放回那个div, innerHTML可能更好。
我的例子:
<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>
如果我使用. firstchild或. lastchild方法，displayHTML()函数之后不会工作，但使用. innerhtml方法没有问题。
Ecma6使它简单而紧凑
myNode.querySelectorAll('*').forEach( n => n.remove() );
这回答了问题，并删除了“所有子节点”。
如果有属于myNode的文本节点，它们不能被CSS选择器选中，在这种情况下，我们必须应用(also):
myNode.textContent = '';
实际上，最后一个可能是最快和更有效的解决方案。
.textContent比.innerText和.innerHTML更有效，参见:MDN
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的元素
