如何在 JavaScript 中通过 ID 高效删除 DOM 元素？-js教程-PHP中文网

如何在 JavaScript 中通过 ID 高效删除 DOM 元素？

Barbara Streisand

发布： 2024-12-18 17:31:11

原创

590 人浏览过

How to Efficiently Remove DOM Elements by ID in JavaScript?

如何使用原生 JavaScript 通过 ID 删除元素

在标准 JavaScript 中，从 DOM 中删除元素需要访问其父节点第一：

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

登录后复制

这种做法看起来有点绕，提示一个问题：为什么 JavaScript 会这样设计

解决方案：扩展 DOM 函数

虽然修改原生 DOM 函数并不总是理想的，但以下 polyfill 在现代浏览器中可以无缝工作：

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] &amp;&amp; this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

登录后复制

使用这个polyfill，你可以删除元素方便地：

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

登录后复制

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

登录后复制

注意：此解决方案不适用于 IE 7 及以下版本。

现代解决方案：Node.remove()

在最近的浏览器中，可以在没有polyfill:

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

登录后复制

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

登录后复制

所有现代浏览器都支持这些功能，不包括 IE。有关更多详细信息，请参阅 MDN 文档。

以上是如何在 JavaScript 中通过 ID 高效删除 DOM 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！