使用标准 JavaScript 删除元素时，必须先转到其父元素：
var element = document.getElementById("element-id");
element.parentNode.removeChild(element);
必须先去父节点对我来说似乎有点奇怪，JavaScript 有这样工作的原因吗？
通过 id 删除元素
IT技术
javascript
dom
2021-01-10 04:35:20
6个回答
我知道增强原生 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 年的答案，node.remove()已经解决了，可以按如下方式使用（没有上面的 polyfill）：
document.getElementById("my-element").remove();
或者
[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());
这些功能在所有现代浏览器（非 IE）中都可用。在MDN上阅读更多内容。
跨浏览器和 IE >= 11：
document.getElementById("element-id").outerHTML = "";
您可以创建一个remove函数，这样您就不必每次都考虑它：
function removeElement(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
element.remove()
DOM 组织在节点树中，其中每个节点都有一个值，以及对其子节点的引用列表。所以element.parentNode.removeChild(element)准确地模仿内部发生的事情：首先你去父节点，然后删除对子节点的引用。
从 DOM4 开始，提供了一个辅助函数来做同样的事情：element.remove(). 这适用于 96% 的浏览器（截至 2020 年），但不适用于 IE 11。如果您需要支持旧浏览器，您可以：
- 通过父节点删除元素，如问题所示，
- 修改原生 DOM 函数，如Johan Dettmar 的回答，或
- 使用DOM4 polyfill。
这就是 DOM 所支持的。在该页面中搜索“remove”或“delete”，removeChild是唯一删除节点的页面。