JavaScript中如何透過ID高效率刪除元素？

在JavaScript 中透過ID 刪除元素：一種方便的替代方法

在JavaScript 中，刪除元素的標準方法需要遍歷到其父節點：

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

這種方法需要額外的步驟來存取父級，這可能效率低下。本文探討了一種透過向 Element 原型添加刪除方法來簡化元素刪除的替代方案。

透過擴充 Element 和 NodeList 原型，您可以將刪除方法引入所有 HTML 元素和集合：

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

或對於多個elements:

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

注意： IE 7及以下版本不支援此解決方案。

更新（2019）： Node.js引入了node.remove()函數，讓元素刪除變得更加簡單：

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

或對於集合：

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

這種更新的方法受到現代瀏覽器的廣泛支持，包括Chrome、Firefox、Edge 和Safari。

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