当使用标准JavaScript删除一个元素时,你必须先去它的父元素:

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

必须先访问父节点对我来说似乎有点奇怪,这是JavaScript这样工作的原因吗?


当前回答

必须先访问父节点对我来说似乎有点奇怪,这是JavaScript这样工作的原因吗?

函数名是removeChild(),当没有父对象时如何可能删除子对象?:)

另一方面,您不必总是像您所显示的那样调用它。元素。parentNode只是一个获取给定节点的父节点的助手。如果你已经知道父节点,你可以像这样使用它:

Ex:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

补充一些东西:

一些回答指出,可以使用element .remove();而不是使用parentnode . removecchild (child);。但正如我所注意到的,这两个功能之间有区别,在那些答案中没有提到。

如果使用removeChild(),它将返回对已删除节点的引用。

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

但是如果你使用element .remove();,它不会返回给你引用。

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

这种行为可以在Chrome和FF中观察到。我相信这值得注意:)

希望我的回答能对这个问题有所帮助!!

其他回答

这是在没有脚本错误的情况下删除元素的最佳函数:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

注意EObj=document.getElementById(EId)。

这是一个等号,不是==。

如果元素id存在,则函数将其删除,否则返回false,而不是error。

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

or

document.getElementsByClassName("my-elements").remove();

注意:此解决方案不适用于ie7及以下版本。有关扩展DOM的更多信息,请阅读本文。

编辑:回顾我在2019年的回答,node.remove()已经来拯救了,可以如下使用(没有上面的填充):

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

or

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

这些功能在所有现代浏览器(不是IE)中都可用。在MDN上阅读更多。

您可以使用DOM的remove()方法直接删除该元素。

这里有一个例子:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

ChildNode.remove()方法将对象从它所属的树中移除。

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

下面是一个演示如何调用document.getElementById('my-id').remove()的示例。

https://jsfiddle.net/52kp584L/

**

不需要扩展NodeList。它已经实施了。

**

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}