Javascript 按 id 删除元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3387427/
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 element by id
提问by Zaz
When removing an element with standard JavaScript, you must go to its parent first:
使用标准 JavaScript 删除元素时，必须先转到其父元素：
var element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Having to go to the parent node first seems a bit odd to me, is there a reason JavaScript works like this?
必须先去父节点对我来说似乎有点奇怪，JavaScript 有这样工作的原因吗？
采纳答案by Zaz
The DOM is organized in a tree of nodes, where each node has a value, along with a list of references to its child nodes. So element.parentNode.removeChild(element)mimics exactly what is happening internally: First you go the the parent node, then remove the reference to the child node.
DOM 组织在节点树中，其中每个节点都有一个值，以及对其子节点的引用列表。所以element.parentNode.removeChild(element)准确地模仿内部发生的事情：首先你去父节点，然后删除对子节点的引用。
As of DOM4, a helper function is provided to do the same thing: element.remove(). This works in 87% of browsers(as of 2016), but not IE 11. If you need to support older browsers, you can:
从 DOM4 开始，提供了一个辅助函数来做同样的事情：element.remove(). 这适用于 87% 的浏览器（截至 2016 年），但不适用于 IE 11。如果您需要支持旧浏览器，您可以：
- Remove elements via the parent node, as in the question,
- modify the native DOM functions, as in Johan Dettmar's answer, or
- use a DOM4 polyfill.
- 通过父节点删除元素，如问题所示，
- 修改原生 DOM 函数，如Johan Dettmar 的回答，或
- 使用DOM4 polyfill。
回答by Johan Dettmar
I know that augmenting native DOM functions isn't always the best or most popular solution, but this works fine for modern browsers.
我知道增强原生 DOM 函数并不总是最好或最受欢迎的解决方案，但这对现代浏览器来说效果很好。
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
And then you can remove elements like this
然后你可以删除这样的元素
document.getElementById("my-element").remove();
or
或者
document.getElementsByClassName("my-elements").remove();
Note:this solution doesn't work for IE 7 and below. For more info about extending the DOM read this article.
注意：此解决方案不适用于 IE 7 及更低版本。有关扩展 DOM 的更多信息，请阅读这篇文章。
EDIT: Reviewing my answer in 2019, node.remove()has come to the rescue and can be used as follows (without the polyfill above):
编辑：回顾我在 2019 年的回答，node.remove()已经解决了，可以按如下方式使用（没有上面的 polyfill）：
document.getElementById("my-element").remove();
or
或者
[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());
These functions are available in all modern browsers (not IE). Read more on MDN.
这些功能在所有现代浏览器（不是 IE）中都可用。在MDN上阅读更多内容。
回答by user2192293
Crossbrowser and IE >= 11:
跨浏览器和 IE >= 11：
document.getElementById("element-id").outerHTML = "";
回答by xsznix
You could make a removefunction so that you wouldn't have to think about it every time:
您可以创建一个remove函数，这样您就不必每次都考虑它：
function removeElement(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
回答by xsznix
It's what the DOM supports. Search that page for "remove" or "delete" and removeChildis the only one that removes a node.
这就是 DOM 所支持的。在该页面中搜索“remove”或“delete”，removeChild是唯一删除节点的页面。
回答by csjpeter
For removing one element:
删除一个元素：
var elem = document.getElementById("yourid");
elem.parentElement.removeChild(elem);
For removing all the elements with for example a certain class name:
删除所有元素，例如某个类名：
var list = document.getElementsByClassName("yourclassname");
for(var i = list.length - 1; 0 <= i; i--)
if(list[i] && list[i].parentElement)
list[i].parentElement.removeChild(list[i]);
回答by Sai Sunder
you can just use element.remove()
你可以使用 element.remove()
回答by Alex Fallenstedt
The ChildNode.remove()method removes the object from the tree it belongs to.
该ChildNode.remove()方法从它所属的树中删除对象。
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
Here is a fiddle that shows how you can call document.getElementById('my-id').remove()
这是一个显示如何调用的小提琴 document.getElementById('my-id').remove()
https://jsfiddle.net/52kp584L/
https://jsfiddle.net/52kp584L/
**
**
There is no need to extend NodeList. It has been implemented already.
无需扩展 NodeList。它已经实施了。
**
**
回答by Code Cooker
You can directly remove that element by using remove()method of DOM.
您可以使用remove()DOM 的方法直接删除该元素。
here's an example:
这是一个例子：
let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();
回答by Red
According to DOM level 4 specs, which is the current version in development, there are some new handy mutation methods available: append(), prepend(), before(), after(), replace(), and remove().
据DOM 4级规格，这是当前版本的发展，出现了一些新得心应手突变方法可供选择：append()，prepend()，before()，after()，replace()，和remove()。
https://catalin.red/removing-an-element-with-plain-javascript-remove-method/
https://catalin.red/removing-an-element-with-plain-javascript-remove-method/
