仅从对元素的引用中移除 DOM 中的元素

Question

这要么非常简单，要么不可能。

我知道我能做到：

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

...但感觉很乱。是否有一种更简洁且得到普遍支持的方式来做同样的事情？

似乎——至少在我看来——应该是这样的：

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

...但这不起作用，搜索 Google/SO 并没有找到任何替代方案。

我知道这无关紧要，但 parentNode.removeChild() 只是觉得 hacky/messy/inefficient/bad practice-y。

Answer 1

这看起来有点乱，但这是从父元素中移除元素的标准方法。 DOM 元素本身可以独立存在，没有parentNode，因此removeChild 方法在父级上是有意义的。

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

不过，您始终可以为此功能创建自己的包装器。例如

function removeElement(element) {
    element && element.parentNode && element.parentNode.removeChild(element);
}

// Usage:
removeElement( document.getElementById('some_element') );

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

$('#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 节点的集合，而不是像上面那样仅包含单个元素。

Answer 2

DOM 4 级规范似乎采用了“jQuery 哲学”来执行多个 DOM 更改操作（请参阅https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-element）。删除就是其中之一：

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

目前，它仅在更高版本的 Chrome、Opera、Firefox 中受支持，但如果您想在今天的生产中使用此功能，可以使用 shims 对其进行修补： https://github.com/Raynos/DOM-shim

是否最好删除Child，我现在没有争议。

Answer 3

您的代码是正确且最好的方法。

jQuery 有what you're looking for:

$("#someId").remove();