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

是否有像document.getElementById("FirstDiv").clear()

回答最初的问题 – 有很多方法可以做到这一点,但以下是最简单的方法。

如果你已经有了一个你想删除的子节点的句柄,也就是说你有一个JavaScriptvariables来保存对它的引用:

 myChildNode.parentNode.removeChild(myChildNode); 

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

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

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

如果你想清除div并删除所有的子节点,你可以把:

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

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

一个jQuery解决scheme

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

参考文献:

属性等于select器[name = value]

select具有指定属性的元素,其值恰好等于某个特定值。

子select器(“父>子”)

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. 
 targetNode.remove(); 

这是W3C推荐到2015年底,是香草JS。 比以前的方法更好/更清洁。

对于你的用例:

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

如果你需要一个polyfill来确保向后兼容性:

 if (!('remove' in Element.prototype)) { Element.prototype.remove = function() { if (this.parentNode) { this.parentNode.removeChild(this); } }; } 

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

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

例如,MochiKit有一个removeElement函数,而jQuery已经删除 。

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

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

容易明白