只从引用元素的DOM中删除一个元素

Remove an element from the DOM from reference to element only

本文关键字：元素 删除 一个 引用 DOM      更新时间：2023-09-26

这要么很简单，要么不可能。

我知道我可以这样做:

var element = document.getElementById('some_element');
element.parentNode.removeChild(element);

…但感觉很乱。做同样的事情，有没有一种更整洁——而且得到普遍支持——的方法?

似乎——至少对我来说——应该有这样的东西:

document.getElementById('some_element').remove();

…但这不起作用，搜索Google/SO也没有找到任何替代方法。

我知道这并不重要，但是parentNode.removeChild()感觉很粗糙/混乱/低效/不好的做法。

这看起来有点乱，但这是从父元素中删除元素的标准方法。DOM元素本身可以独立存在，不需要parentNode，所以removeChild方法在父元素上是有意义的。

在我看来，DOM节点上的通用.remove()方法本身可能会产生误导，毕竟，我们并没有从存在中删除元素，只是从它的父元素中删除。

你可以为这个功能创建你自己的包装器。例如

function removeElement(element) {
    element && element.parentNode && element.parentNode.removeChild(element);
}
// Usage:
removeElement( document.getElementById('some_element') );

或者，使用像jQuery这样的DOM库，它为你提供了一堆包装器，例如:

$('#some_element').remove();

这个编辑是对您的评论的回应，您在评论中询问了扩展本机DOM实现的可能性。这被认为是一种不好的做法，所以我们要做的是创建我们自己的包装器来包含元素，然后创建我们想要的任何方法。例如

function CoolElement(element) {
    this.element = element;
}
CoolElement.prototype = {
    redify: function() {
        this.element.style.color = 'red';
    },
    remove: function() {
        if (this.element.parentNode) {
            this.element.parentNode.removeChild(this.element);
        }
    }
};
// Usage:
var myElement = new CoolElement( document.getElementById('some_element') );
myElement.redify();
myElement.remove();

本质上这就是jQuery所做的，尽管它更高级一些，因为它包装了DOM节点的集合，而不是像上面那样只包装单个元素。

DOM level 4规范似乎采用了"jQuery哲学"来进行多个DOM更改操作(参见https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-element)。Remove是其中之一:

var el = document.getElementById("myEl");
el.remove();

目前，它只支持Chrome, Opera, Firefox的后续版本，但如果你想在今天的生产中使用这个功能，有一些补丁可以修补:https://github.com/Raynos/DOM-shim

是否应该使用removeChild，我暂时不作讨论。

你的代码是正确的，也是最好的方法。

jQuery有你想要的:

$("#someId").remove();
相关文章：