16

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

我知道我可以这样做：

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。

4

3 回答 3

34

它看起来有点混乱，但这是从其父元素中删除元素的标准方法。DOM 元素本身可以独立存在，没有 a ，因此该方法在父级上是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 节点的集合，而不仅仅是像上面那样的单个元素。

于 2011-09-26T21:07:27.070 回答
4

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，我现在都没有争议。

于 2014-02-03T14:29:56.570 回答
1

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

jQuery 有你正在寻找的东西：

$("#someId").remove();
于 2011-09-26T21:05:57.130 回答