【问题标题】：How can I remove a child node in HTML using JavaScript?如何使用 JavaScript 删除 HTML 中的子节点？
【发布时间】：2010-09-06 00:56:39
【问题描述】：

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

【问题讨论】：

node.remove(); 是执行此操作的现代方式。 document.getElementById("FirstDiv").remove(); 用于您的用例

标签： javascript html dom

【解决方案1】：

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

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

myChildNode.parentNode.removeChild(myChildNode);

显然，如果您没有使用已经这样做的众多库之一，您可能需要创建一个函数来将其抽象出来：

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

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

【讨论】：

通过“糟糕的实现”。你的意思是IE6、IE7、IE8还是别的什么？（特别是，好的浏览器也会泄漏内存吗？我目前不再关心 IE 6-7。）
@CamiloMartin - 这些天不确定具体情况，但据我记得，“好”的浏览器应该注意并处理这些事情。 YMMV

【解决方案2】：

如果你想清除 div 并删除所有子节点，你可以放：

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

【讨论】：

【解决方案3】：

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

对于您的用例：

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

这是 W3C 自 2015 年底以来推荐的，并且是 vanilla JS。所有主流浏览器都支持它。

Mozilla Docs

Supported Browsers - 2020 年 5 月 96%

【讨论】：

请编辑以表明“以前的方法”是什么，因为问题被投票赞成/反对并被删除，这最终没有明确的含义

【解决方案4】：

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

【讨论】：

【解决方案5】：

一个jQuery解决方案

HTML

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

Javascript

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

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

参考资料：

Attribute Equals Selector [name=value]

选择具有具有值的指定属性完全等于某个值。

Child Selector (“parent > child”)

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

.remove()

与 .empty() 类似，.remove() 方法从 DOM 中取出元素。当我们想要时使用 .remove() 删除元素本身，以及里面的一切。此外元素本身，全部绑定相关的事件和 jQuery 数据元素被移除。

【讨论】：

【解决方案6】：

使用以下代码：

//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.

【讨论】：

【解决方案7】：

    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

p 是父节点，c 是子节点
parentNode 是一个包含父引用的 JavaScript 变量

简单易懂

【讨论】：

【解决方案8】：

你应该可以使用节点的 .RemoveNode 方法或父节点的 .RemoveChild 方法。

【讨论】：

【解决方案9】：

你应该使用 JavaScript 库来做这样的事情。

例如，MochiKit 有一个函数removeElement，jQuery 有一个remove。

【讨论】：

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

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