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

StackOverflow https://stackoverflow.com/questions/13763

  •  08-06-2019
  •  | 
  •  

题

有没有类似的函数 document.getElementById("FirstDiv").clear()?

有帮助吗？

解决方案

要回答原来的问题 - 有多种方法可以做到这一点，但以下是最简单的。

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

myChildNode.parentNode.removeChild(myChildNode);

显然，如果您没有使用已经执行此操作的众多库之一，您可能需要创建一个函数来将其抽象出来：

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

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

其他提示

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

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

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

Mozilla 文档

支持的浏览器 - 92% 2018 年 3 月

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

jQuery 解决方案

超文本标记语言

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

参考：

属性等于选择器 [名称=值]

选择具有指定属性的元素，其值完全等于某个值。

子选择器（“父>子”）

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

。消除（）

类似于.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.

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

p是父节点，c是子节点
ParentNode 是一个 JavaScript 变量，其中包含父引用

容易明白

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

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

例如，MochiKit 有一个函数 删除元素, ，并且 jQuery 有 消除.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top