如何在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 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的其他方法
var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();
通常，JavaScript使用数组引用DOM节点列表。如果你有兴趣通过HTMLElements数组来做，这会很好。另外，值得注意的是，因为我使用的是数组引用而不是JavaScript原型，这应该可以在任何浏览器中工作，包括IE。
while(nodeArray.length !== 0) {
nodeArray[0].parentNode.removeChild(nodeArray[0]);
}
如果你只想拥有这个节点而不拥有它的子节点，你也可以像这样复制它:
var dupNode = document.getElementById("foo").cloneNode(false);
这取决于你想要达到什么目的。
元素。innerHTML = ""(或.textContent)是目前为止最快的解决方案
这里的大多数答案都是基于有缺陷的测试
例如: https://jsperf.com/innerhtml-vs-removechild/15 该测试不会在每次迭代之间向元素添加新的子元素。第一次迭代将删除元素的内容，然后每一次迭代都不执行任何操作。 在这种情况下，while (box. lastchild) box. removecchild (box. lastchild)更快，因为box. lastchild。lastChild在99%的情况下为null
这里有一个合适的测试:https://jsperf.com/innerhtml-conspiracy
最后，不要使用node. parentnode . replacechild (node. clonenode (false)， node)。这将用节点本身的副本替换它的子节点。但是，这不会保留事件侦听器，并破坏对该节点的任何其他引用。
element.textContent = '';
它像innerText，除了标准。它比removecchild()稍微慢一点，但更容易使用，如果没有太多东西需要删除，则不会有太大的性能差异。
