我如何使用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
容易明白