Question

这非常简单或不可能。

我知道我可以这样做：

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

......但感觉很乱。是否有更整洁，普遍支持的方式来做同样的事情？

似乎 - 对我来说至少 - 就像应该有这样的东西：

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

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

我知道这并不重要，但是parentNode.removeChild()只会感到hacky / messy / lowfficient / bad practice-y。

Answer 1

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

IMO对DOM节点本身的通用.remove()方法可能会产生误导，毕竟，我们不是仅仅从其父节点中删除该元素。

您可以随时为此功能创建自己的包装器。 E.g。

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

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

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

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

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

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

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

jQuery有what you're looking for：

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

Answer 3

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的更高版本中得到支持，但如果您想在今天的生产中使用此功能，可以使用垫片进行修补： https://github.com/Raynos/DOM-shim

更好的是删除孩子，我现在留下不足之处。

从DOM引用元素仅从元素中删除元素

3 个答案: