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

如何在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专用的答案，会有额外的加分。

当前回答

Ecma6使它简单而紧凑

myNode.querySelectorAll('*').forEach( n => n.remove() );

这回答了问题，并删除了“所有子节点”。

如果有属于myNode的文本节点，它们不能被CSS选择器选中，在这种情况下，我们必须应用(also):

myNode.textContent = '';

实际上，最后一个可能是最快和更有效的解决方案。

.textContent比.innerText和.innerHTML更有效，参见:MDN

其他回答

element.textContent = '';

它像innerText，除了标准。它比removecchild()稍微慢一点，但更容易使用，如果没有太多东西需要删除，则不会有太大的性能差异。

有几个选项可以实现这一目标:

最快的():

while (node.lastChild) {
  node.removeChild(node.lastChild);
}

选择(慢):

while (node.firstChild) {
  node.removeChild(node.firstChild);
}

while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

使用建议的选项进行基准测试

刚刚看到有人在另一个问题中提到这个问题，我想我会添加一个我还没有看到的方法:

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

clear函数获取元素并使用父节点将其自身替换为没有其子节点的副本。如果元素是稀疏的，则性能增益不大，但当元素有一堆节点时，性能增益就实现了。

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方法删除子元素，那么这些数据将会保留。

jQuery的其他方法

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

推荐文章