如何高效删除 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中文网其他相关文章！