如何使用JavaScript删除HTML中的子节点？

Question

有没有这样的功能document.getElementById("FirstDiv").clear()？

Answer 1

要回答最初的问题 - 有多种方法可以做到这一点,但以下是最简单的方法.

如果您已经有要删除的子节点的句柄,即您有一个包含对它的引用的JavaScript变量:

myChildNode.parentNode.removeChild(myChildNode);

显然,如果您没有使用已经执行此操作的众多库中的一个,您可能需要创建一个函数来抽象出来:

function removeElement(node) {
    node.parentNode.removeChild(node);
}

编辑:正如其他人所提到的:如果你有任何事件处理程序连接到你要移除的节点,你将需要确保在最后一个对被删除节点的引用超出范围之前断开它们,以免执行不良JavaScript解释器泄漏内存.

Answer 2

如果要清除div并删除所有子节点,可以放:

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

Answer 3

targetNode.remove()

这是W3C在2015年底推荐的,并且是vanilla JS.比以前的方法更好/更清洁.

对于您的用例:

document.getElementById("FirstDiv").remove();

如果您需要填充物以确保向后兼容性:

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}

Mozilla文档

支持的浏览器 - 2018年3月92%