Javascript 仅从对元素的引用中删除 DOM 中的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7561277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove an element from the DOM from reference to element only
提问by DaveRandom
This is either very simple or impossible.
这要么非常简单，要么不可能。
I know I can do this:
我知道我可以这样做：
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();
...but that doesn't work, and searching Google/SO has not yielded any alternative.
...但这不起作用，搜索 Google/SO 并没有产生任何替代方案。
I know it doesn't matter that much, but parentNode.removeChild()just feels hacky/messy/inefficient/bad practice-y.
我知道这没什么大不了的，但parentNode.removeChild()只是感觉很笨拙/凌乱/效率低下/糟糕的做法-y。
回答by James
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 removeChildmethod is on the parent.
这看起来有点乱，但这是从父元素中删除元素的标准方法。DOM 元素本身可以独立存在，无需parentNode，因此该removeChild方法位于父元素上是有意义的。
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.
IMO .remove()DOM 节点本身的通用方法可能会产生误导，毕竟，我们不是从存在中删除元素，只是从其父元素中删除。
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') );
Or, use a DOM library like jQuerywhich provides a bunch of wrappers for you, e.g. in jQuery:
或者，使用像jQuery这样的 DOM 库，它为您提供了一堆包装器，例如在 jQuery 中：
$('#some_element').remove();
This editis 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.
此编辑是对您的评论的回应，您在评论中询问了扩展本机 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();
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.
本质上，这就是 jQuery 所做的，尽管它更高级一些，因为它包装了 DOM 节点的集合，而不是像上面那样只是一个单独的元素。
回答by Daniel
The DOM level 4 specs seems to have adopted the "jQuery philosophy" of doing several DOM changing operations (see https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-element). Remove is one of them:
DOM 级别 4 规范似乎采用了“jQuery 哲学”，即执行多个 DOM 更改操作（参见https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-element） . 删除是其中之一：
var el = document.getElementById("myEl");
el.remove();
At this time, it's only supported in later version of Chrome, Opera, Firefox, but there are shims to patch this up if you want to use this functionality in production today: https://github.com/Raynos/DOM-shim
目前，它仅在更高版本的 Chrome、Opera、Firefox 中受支持，但如果您今天想在生产中使用此功能，可以使用 shims 对其进行修补：https: //github.com/Raynos/DOM-shim
Wether it's preferable to removeChild or not, I leave undebated for now.
无论是否最好 removeChild ，我现在都没有争论。
回答by SLaks
Your code is the correct and best way to do it.
你的代码是正确和最好的方法。
jQuery has what you're looking for:
jQuery 有你要找的东西：
$("#someId").remove();
