如何在 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中文網其他相關文章！