提问人:Niyaz 提问时间:8/18/2008 最后编辑:Alexander ElginNiyaz 更新时间:8/13/2020 访问量:135447
如何使用 JavaScript 删除 HTML 中的子节点?
How can I remove a child node in HTML using JavaScript?
答:
您应该能够使用 .节点的 RemoveNode 方法或 .父节点的 RemoveChild 方法。
如果要清除 div 并删除所有子节点,可以放置:
var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
mydiv.removeChild(mydiv.firstChild);
}
您可能应该使用 JavaScript 库来做这样的事情。
例如,MochiKit 有一个函数 removeElement,而 jQuery 有一个 remove。
在删除节点之前,必须删除在节点上设置的任何事件处理程序,以避免 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>
Java脚本
// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();
// remove all child "option" elements
$("#foo > option").remove();
引用:
选择具有 具有值的指定属性 正好等于某个值。
选择所有直接子元素 由元素的“子”指定 由“parent”指定
与 .empty() 类似,.remove() 方法从 DOM 中取出元素。 当我们需要时,我们使用 .remove() 删除元素本身,以及 里面的一切。除了 元素本身,都是绑定的 与 这些元素将被删除。
使用以下代码:
//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。所有主流浏览器都支持它。
支持的浏览器 - 96% 2020 年 5 月
评论
var p=document.getElementById('childId').parentNode;
var c=document.getElementById('childId');
p.removeChild(c);
alert('Deleted');
p 是父节点,c 是子节点
parentNode 是一个包含父引用
的 JavaScript 变量 易于理解
评论
node.remove();
是做到这一点的现代方法。 适用于您的用例document.getElementById("FirstDiv").remove();