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

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元素本身可以独立存在,没有a parentNode,因此该removeChild方法在父级上是有意义的.

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

您可以随时为此功能创建自己的包装器.例如

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 level 4 规范似乎采用了执行多个 DOM 更改操作的“jQuery 哲学”（请参阅​​ 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

无论是否最好删除Child，我暂时不予争论。