如何在 JavaScript 中透過 ID 有效率地刪除 DOM 元素？

如何使用原生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] && 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 && n.remove());

所有現代瀏覽器都支援這些功能，不包括IE。有關更多詳細信息，請參閱 MDN 文件。

以上是如何在 JavaScript 中透過 ID 有效率地刪除 DOM 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！