如何有效率地刪除 JavaScript 中的 HTML 元素？

輕鬆刪除元素：探索nativeDOM和node.remove()

當負責在JavaScript中刪除HTML元素時，長期以來，一個，一個明顯的奇怪之處：必須先選擇父節點。直到最近，標準方法還需要以下程式碼：

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

改進的方法

對於現代瀏覽器，增強原生 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();

node.remove()的勝利

在最近的更新中，node.remove( ）已成為此任務的救世主，可在所有現代瀏覽器中使用，除了IE:

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

或

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

雖然這些解決方案可能不適用於IE 7及更低版本，但它們提供了一種更平滑、更合乎邏輯的方式從DOM 中刪除元素，留下更有效率、更簡單的編碼體驗背後。

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