从DOM引用元素仅从元素中删除元素 [英] Remove an element from the DOM from reference to element only

问题描述

这可能非常简单或不可能。

This is either very simple or impossible.

我知道我可以这样做：

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

...但感觉很麻烦。有没有更整洁 - 并且得到普遍支持的方式来做同样的事情？

...but it feels messy. Is there a tidier - and universally supported - way to do the same thing?

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

It's seems - to me at least - like there should be something like this:

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

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

...but that doesn't work, and searching Google/SO has not yielded any alternative.

我知道这并不重要，但 parentNode.removeChild（）只是觉得hacky / messy /低效/糟糕的做法-y。

I know it doesn't matter that much, but parentNode.removeChild() just feels hacky/messy/inefficient/bad practice-y.

推荐答案

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

It can seem a bit messy, but that is the standard way of removing an element from its parent. The DOM element itself can exist on its own, without a parentNode, so it makes sense that the removeChild method is on the parent.

IMO是DOM节点本身的泛型 .remove（）方法可能会产生误导，毕竟，我们不会仅仅从其父元素中删除元素。

IMO a generic .remove() method on the DOM node itself might be misleading, after all, we're not removing the element from existence, just from its parent.

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

You can always create your own wrappers for this functionality though. E.g.

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

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

或者，使用像 jQuery ，为您提供一堆包装器，例如在jQuery中：

Or, use a DOM library like jQuery which provides a bunch of wrappers for you, e.g. in jQuery:

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

---

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

---

This edit is in response to your comment, in which you inquired about the possibility to extend native DOM implementation. This is considered a bad practice, so what we do instead, is create our own wrappers to contain the elements and then we create whatever methods we want. 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的功能，虽然它更高级，因为它包含了jQuery的集合DOM节点而不仅仅是上面的单个元素。

This is, in essence, what jQuery does, although it's a little more advanced because it wraps collections of DOM nodes instead of just an individual element like above.

这篇关于从DOM引用元素仅从元素中删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！