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

是否有类似于

document.getElementById（“FirstDiv”）.clear（）的函数？

？

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

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

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

---

您可能应该使用JavaScript库来执行类似的操作

---

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

在删除节点之前，您必须删除在节点上设置的任何事件处理程序，以避免IE中的内存泄漏。要回答最初的问题，有多种方法，但以下是最简单的方法

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

myChildNode.parentNode.removeChild(myChildNode);

显然，如果您没有使用已经实现这一点的众多库中的一个，那么您可能希望创建一个函数来抽象这一点：

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

---

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

jQuery解决方案

HTML

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

参考资料：

选择具有以下属性的图元： 具有值的指定属性 完全等于某个值

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

与.empty（）类似，.remove（）函数 方法将元素从DOM中取出。 我们可以在需要时使用.remove（） 移除元素本身，以及 里面的一切。除了 元素本身，都是绑定的 与关联的事件和jQuery数据 元素被移除

---

使用以下代码：

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

现代解决方案-

child.remove（）

对于您的用例：

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

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

2020年5月-96%

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

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

---

易于理解

“实施不力”。你是说IE6，IE7，IE8还是别的什么？（特别是，好的浏览器也会泄漏内存吗？我现在不再关心IE 6-7。）@CamiloMartin-这些天不确定具体细节，但据我回忆，“好”浏览器应该注意并处理这些事情。YMMV

node.remove（）

是实现这一点的现代方法<代码>document.getElementById（“FirstDiv”）.remove（）对于您的用例，请编辑以指明“以前的方法”是什么，因为问题会被上/下投票并删除，最终没有明确的含义

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