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中文网其他相关文章！