按 id 移除元素

Question

使用标准 JavaScript 删除元素时，必须先转到其父元素：

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

必须先转到父节点对我来说似乎有点奇怪，JavaScript 这样工作是否有原因？

原文由 Zaz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2011 年更新

这已 在 2011 年添加到 DOM 规范 中，因此您可以使用：

 element.remove()

DOM 组织在节点树中，其中每个节点都有一个值，以及对其子节点的引用列表。所以 element.parentNode.removeChild(element) 准确地模仿了内部发生的事情：首先你去父节点，然后删除对子节点的引用。

从 DOM4 开始，提供了一个辅助函数来做同样的事情： element.remove() 。这 适用于 96% 的浏览器（截至 2020 年），但不适用于 IE 11。

如果您需要支持旧版浏览器，您可以：

• 通过父节点移除元素

• 修改本机 DOM 函数，如 Johan Dettmar 的回答，或

• 使用 DOM4 polyfill 。

原文由 Zaz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我知道增加本机 DOM 功能并不总是最好或最受欢迎的解决方案，但这对现代浏览器来说效果很好。

 Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

然后你可以像这样删除元素

document.getElementById("my-element").remove();

要么

document.getElementsByClassName("my-elements").remove();

注意： 此解决方案不适用于 IE 7 及以下版本。有关扩展 DOM 的更多信息，请阅读这篇 文章。

编辑：回顾我在 2019 年的回答， node.remove() 已经派上用场，可以按如下方式使用（没有上面的 polyfill）：

 document.getElementById("my-element").remove();

要么

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

这些功能在所有现代浏览器（不是 IE）中都可用。在 MDN 上阅读更多内容。

原文由 Johan Dettmar 发布，翻译遵循 CC BY-SA 4.0 许可协议