当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何使用JavaScript删除HTML中的子节点?》经验,为你挑选了3个好方法。

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



1> Jason Buntin..:

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

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

myChildNode.parentNode.removeChild(myChildNode);

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

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

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



2> eplawless..:

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

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



3> Gibolt..:
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%

推荐阅读
牛尾巴2010
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有