為什麼 JavaScript 元素刪除如此複雜，如何簡化？

簡化JavaScript 中的元素移除

JavaScript 移除元素的方法，涉及找到父節點，然後手動移除元素，看起來像是麻煩。這就引出了一個問題：為什麼 JavaScript 是用這種方式設計的？

雖然可能存在技術原因，但一種解決方案是增強原生 DOM 功能。這種方法並不適合所有情況，但它在現代瀏覽器中運作良好。

Polyfill 方法

使用以下程式碼，您可以擴充 Element 和 NodeList原型包含刪除方法：

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();

雖然此解決方案在現代瀏覽器中有效，但它不支援Internet Explorer 7 及更低版本。

現代瀏覽器解決方案

幸運的是，現代瀏覽器（不包括 IE）已經引入了node.remove() 函數。這個函數允許你直接刪除元素，而不需要polyfill。

使用node.remove()：

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

或：

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

所有主流瀏覽器都支援此方法，包括Chrome、Firefox、Edge 和Safari 。

以上是為什麼 JavaScript 元素刪除如此複雜，如何簡化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！