按 id 删除元素

javascript dom

2022-08-29 22:02:49

使用标准 JavaScript 删除元素时，必须先转到其父级：

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

必须首先转到父节点对我来说似乎有点奇怪，JavaScript像这样工作的原因是什么？

答案 1

我知道增强本机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();

注意：此解决方案不适用于IE 7及更低版本。有关扩展 DOM 的详细信息，请阅读本文。

编辑：回顾我在2019年的答案，已经来救援，可以按如下方式使用（没有上面的polyfill）：node.remove()

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

或

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

这些功能在所有现代浏览器（非IE）中都可用。阅读有关 MDN 的更多信息。

答案 2

Crossbrowser 和 IE >= 11：

document.getElementById("element-id").outerHTML = "";