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


当前回答

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]);
}

innerText是赢家!http://jsperf.com/innerhtml-vs-removechild/133。在所有之前的测试中,父节点的内部dom在第一次迭代时被删除,然后innerHTML或removecchild应用于空div。

2022年+,用替代品!

现在可以使用(跨浏览器支持的)replaceChildren API替换所有的子程序:

container.replaceChildren(...arrayOfNewChildren);

这可以做到这两点:

删除所有现有的子节点,和 在一个操作中追加所有给定的新子节点。

你也可以使用相同的API来删除现有的子节点,而不替换它们:

container.replaceChildren();

这在Chrome/Edge 86+, Firefox 78+和Safari 14+中完全支持。它是完全指定的行为。这可能比这里提出的任何其他方法都要快,因为删除旧的子元素和添加新的子元素不需要innerHTML,而且是一步完成的,而不是多个步骤。

如果你使用jQuery:

$('#foo').empty();

如果你没有:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

如果你想清空整个父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 >