问题描述
我知道,增强本机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的更多信息。
解决方法
使用标准JavaScript删除元素时,必须首先转到其父元素:
var element = document.getElementById("element-id");
element.parentNode.removeChild(element);
首先必须去父节点对我来说有点奇怪,JavaScript是否有这样的原因?