如何在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专用的答案，会有额外的加分。
当前回答
迭代地从DOM中删除节点的所有子节点的一行程序
Array.from(node.children).forEach(c => c.remove())
Or
[...node.children].forEach(c => c.remove())
其他回答
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方法删除子元素，那么这些数据将会保留。
这是另一种方法:
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();
}
简单的只有IE:
parentElement.removeNode(true);
True -意味着做深层移除-这意味着所有的子也被移除
你可以从一个容器中删除所有子元素，如下所示:
function emptyDom(selector){
const elem = document.querySelector(selector);
if(elem) elem.innerHTML = "";
}
现在你可以调用函数并像下面这样传递选择器:
如果元素id = foo
emptyDom('#foo');
如果元素有class = foo
emptyDom('.foo');
如果元素有tag = <div>
emptyDom('div')
为什么我们不在这里使用最简单的方法“remove”循环在while中。
const foo = document.querySelector(".foo");
while (foo.firstChild) {
foo.firstChild.remove();
}
选择父div 在While循环中使用“remove”方法消除第一个子元素，直到没有剩余。
