Javascript 从DOM中仅从对元素的引用中删除元素

这不是很简单就是不可能

我知道我能做到：

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

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

至少在我看来，似乎应该有这样的东西：

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

…但这不起作用，搜索Google/SO也没有任何选择

---

我知道这没什么大不了的，但是

parentNode.removeChild（）

只会让人感觉不舒服/凌乱/低效/糟糕的做法-y.

你的代码是正确和最好的方法

jQuery有：

---

这看起来有点混乱，但这是从其父元素中删除元素的标准方法。DOM元素本身可以独立存在，而不需要父节点

parentNode

，因此

removeChild

方法位于父节点上是有意义的

在我看来，DOM节点本身上的泛型

.remove（）

方法可能会产生误导，毕竟，我们并不是从存在中删除元素，只是从其父元素中删除

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

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

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

或者，使用类似的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节点的集合，而不是像上面那样的单个元素。

DOM级别4规范似乎采用了“jQuery哲学”，即执行多个DOM更改操作（请参阅）。删除是其中之一：

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

目前，它仅在较新版本的Chrome、Opera和Firefox中受支持，但如果您想在今天的生产中使用此功能，则可以通过以下方式进行修补：

---

不管是不是最好离开孩子，我都会毫不犹豫地离开

+1，我喜欢你的remove-element方法，但它引出了一个子问题——是否有任何方法可以为DOM元素原型化方法（在任何地方都适用）？我尝试过

HTMLElement.prototype

和外观可怕的

对象。prototype

但这两种方法都不适用于任何地方……是的，有很多方法可以让它工作，但这被认为是一种不好的做法。这就是为什么像jQuery这样的东西存在，创建一个完全独立的对象来包含元素，通过它可以调用方法。您还可以扩展jQuery。我将对我的答案进行编辑。给我一点时间：）同意，抛开我对像jQ这样的库的憎恨（参见对其他答案的评论），你说的一切都是真的。这个指令是不是

element&&element.parentNode&&element.parentNode.removeChild（element）

表示如果元素存在且其“父元素”也存在，则删除该元素？为什么我们可以使用多个

&&

来执行这些步骤？我不知道为什么我可以这样做。@Stallman，作为将来的参考，JS使用短路求值，这意味着如果

element

或

element.parentNode

不存在，逻辑操作将短路并返回

false

。本页更多信息：我想可能是这样的，但我想我会问一下，以防我错过了一些显而易见的东西。我个人避免使用JS框架，因为a）从长远来看，这是非常罕见的，它会为您节省任何带宽-我的纯JS脚本往往比库+基于库的代码小，b）它会让您懒惰，并且您忘记了语言的实际工作方式。无论如何，我将+1，因为当我忽略我的个人观点时，你的回答肯定是有用的…框架让你忘记IE（mis-）是如何工作的。快速：如何使用IE在Javascript中设置

float

？框架鼓励您学习Javascript是如何工作的，同时让您忘记DOM是如何工作的。他们也让你发展得更快。我同意不必担心跨同胞（尤其是IE跨同胞）是件好事，但我没有看到有人被鼓励学习这种语言的细节——我和许多写jQ的人一起工作，他们中没有一个人知道从何处开始，他们似乎认为我做的一些事情是巫术…@Dave:这是他们的错，他们也会在jQuery上遇到麻烦。正确使用jQuery需要深入理解原始Javascript，包括闭包、原型和引用。

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