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

How can I remove a child node in HTML using JavaScript?

提问人:Niyaz 提问时间:8/18/2008 最后编辑:Alexander ElginNiyaz 更新时间:8/13/2020 访问量:135447

问:

有没有像这样的函数?document.getElementById("FirstDiv").clear()

JavaScript HTML DOM

评论

0赞 Gibolt 11/11/2016
node.remove();是做到这一点的现代方法。 适用于您的用例document.getElementById("FirstDiv").remove();

答:

0赞 EBGreen 8/18/2008 #1

您应该能够使用 .节点的 RemoveNode 方法或 .父节点的 RemoveChild 方法。

49赞 eplawless 8/18/2008 #2

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

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}
0赞 Mike Stone 8/18/2008 #3

您可能应该使用 JavaScript 库来做这样的事情。

例如,MochiKit 有一个函数 removeElement,而 jQuery 有一个 remove

4赞 Polsonby 8/18/2008 #4

在删除节点之前,必须删除在节点上设置的任何事件处理程序,以避免 IE 中的内存泄漏

109赞 Jason Bunting 8/18/2008 #5

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

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

myChildNode.parentNode.removeChild(myChildNode);

显然,如果你没有使用已经这样做的众多库之一,你会想要创建一个函数来抽象出来:

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

编辑:正如其他人所提到的:如果您有任何事件处理程序连接到要删除的节点,则需要确保在对要删除的节点的最后一个引用超出范围之前断开这些处理程序,以免JavaScript解释器的不良实现泄漏内存。

评论

1赞 Camilo Martin 9/14/2012
通过“糟糕的实施”。你是说IE6、IE7、IE8还是别的什么?(特别是,好的浏览器也会泄漏内存吗?我目前不再关心IE 6-7。
0赞 Jason Bunting 9/23/2012
@CamiloMartin - 不确定这些天的具体情况,但据我所知,“好”的浏览器应该注意这些事情并处理它。YMMV公司
4赞 Chris Jacob 8/2/2010 #6

jQuery解决方案

[HTML全

<select id="foo">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Java脚本

// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();

// remove all child "option" elements
$("#foo > option").remove();

引用:

属性等于选择器 [name=value]

选择具有 具有值的指定属性 正好等于某个值。

子选择器(“父>子”)

选择所有直接子元素 由元素的“子”指定 由“parent”指定

.remove()

与 .empty() 类似,.remove() 方法从 DOM 中取出元素。 当我们需要时,我们使用 .remove() 删除元素本身,以及 里面的一切。除了 元素本身,都是绑定的 与 这些元素将被删除。

3赞 eagle 10/13/2011 #7

使用以下代码:

//for Internet Explorer
document.getElementById("FirstDiv").removeNode(true);

//for other browsers
var fDiv = document.getElementById("FirstDiv");
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists.
22赞 Gibolt 11/11/2016 #8

现代解决方案 -child.remove()

对于您的使用案例:

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

这是 W3C 从 2015 年底开始推荐的,并且是普通的 JS。所有主流浏览器都支持它。

Mozilla 文档

支持的浏览器 - 96% 2020 年 5 月

评论

0赞 Mark Schultheiss 7/29/2020
请编辑以指出“以前的方法”是什么,因为问题被投票赞成/反对并被删除,这最终没有明确的含义
1赞 Vivek Tiwari 6/22/2017 #9
    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

p 是父节点,c 是子节点
parentNode 是一个包含父引用

的 JavaScript 变量 易于理解