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