javascript - 如何使用 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

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

对于您的用例：

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

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

Mozilla 文档

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

Answer 4

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

Answer 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();

参考：

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

选择具有与某个值完全相等的指定属性的元素。

子选择器（“父>子”）

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

。消除（）

与 .empty() 类似，.remove() 方法将元素从 DOM 中取出。当我们想要删除元素本身以及其中的所有内容时，我们使用 .remove() 。除了元素本身，所有与元素关联的绑定事件和 jQuery 数据都将被删除。

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

Answer 7

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

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

易于理解

Answer 8

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

Answer 9

您可能应该使用 JavaScript 库来执行此类操作。

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