js移除html指定id元素,javascript - 按ID删除元素
javascript - 按ID删除元素
使用标准JavaScript删除元素时，必须首先转到其父级：
var element = document.getElementById("element-id");
element.parentNode.removeChild(element);
首先必须转到父节点对我来说有点奇怪，JavaScript是否有这样的原因？
Zaz asked 2018-12-22T19:29:53Z
16个解决方案
520 votes
我知道增加原生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]);
}
}
}
然后你可以删除这样的元素
document.getElementById("my-element").remove();
要么
document.getElementsByClassName("my-elements").remove();
注意：此解决方案不适用于IE 7及更低版本。 有关扩展DOM的更多信息，请阅读本文。
Johan Dettmar answered 2018-12-22T19:30:12Z
217 votes
跨浏览器和IE＆gt; = 11：
document.getElementById("element-id").outerHTML = "";
user2192293 answered 2018-12-22T19:30:32Z
136 votes
您可以制作remove功能，这样您就不必每次都考虑它：
function removeElement(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}
xsznix answered 2018-12-22T19:30:52Z
93 votes
这是DOM支持的。 搜索该页面以“删除”或“删除”，removeChild是唯一删除节点的页面。
Christian Sirolli answered 2018-12-22T19:31:12Z
75 votes
DOM组织在节点树中，其中每个节点都有一个值，以及对其子节点的引用列表。 所以element.remove()模仿内部发生的事情：首先你去父节点，然后删除对子节点的引用。
从DOM4开始，提供了一个辅助函数来执行相同的操作：element.remove()。这适用于87％的浏览器(截至2016年)，但不适用于IE 11.如果您需要支持旧版浏览器，您可以：
通过父节点删除元素，如问题所示，
修改原生DOM功能，如Johan Dettmar的回答，或
使用DOM4 polyfill。
Zaz answered 2018-12-22T19:31:50Z
34 votes
删除一个元素：
var elem = document.getElementById("yourid");
elem.parentElement.removeChild(elem);
要删除所有元素，例如某个类名：
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]);
csjpeter answered 2018-12-22T19:32:14Z
19 votes
你可以使用element.remove()
Sai Sunder answered 2018-12-22T19:32:34Z
14 votes
document.getElementById('my-id').remove()方法从其所属的树中删除对象。
[https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove]
这是一个小提琴，显示如何拨打document.getElementById('my-id').remove()
[https://jsfiddle.net/52kp584L/]
**
无需扩展NodeList。 它已经实施。
**
Alex Fallenstedt answered 2018-12-22T19:33:20Z
6 votes
使用ele.parentNode.removeChild(ele)的函数不适用于您已创建但尚未插入HTML的元素。 像jQuery和Prototype这样的库明智地使用类似下面的方法来规避这种限制。
_limbo = document.createElement('div');
function deleteElement(ele){
_limbo.appendChild(ele);
_limbo.removeChild(ele);
}
我认为JavaScript的工作方式与此类似，因为DOM的原始设计者将父/子和上一/下一导航作为比当今如此流行的DHTML修改更高的优先级。 能够从一个＆lt; input type ='text'＆gt;中读取 并且通过DOM中的相对位置写入另一个是有用的，在90年代中期，动态生成整个HTML表单或交互式GUI元素在某些开发人员眼中几乎没有闪烁。
Psudo answered 2018-12-22T19:33:45Z
5 votes
根据DOM级别4规格(其是当前正在开发的版本)，存在一些新的方便的突变方法：append(),prepend(),before(),after(),replace()和remove()。
[http://red-team-design.com/removing-an-element-with-plain-javascript-remove-method/]
Red answered 2018-12-22T19:34:10Z
4 votes
首先必须转到父节点对我来说有点奇怪，JavaScript是否有这样的原因？
函数名称是elem.remove();，如果没有父项，如何删除子项？:)
另一方面，您并不总是如您所示那样调用它。 elem.remove();只是获取给定节点的父节点的辅助工具。 如果您已经知道父节点，则可以像这样使用它：
例如：
// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
[https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild]
=========================================================
要添加更多内容：
有些答案指出，不是使用elem.remove();，而是使用elem.remove();.但正如我所注意到的，这两个函数之间存在差异，并且在这些答案中没有提及。
如果您使用elem.remove();，它将返回对已删除节点的引用。
var removedChild = element.parentNode.removeChild(element);
console.log(removedChild); //will print the removed child.
但是如果您使用elem.remove();，它将不会返回您的参考。
var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined
[https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove]
在Chrome和FF中可以观察到此行为。 我相信这值得注意:)
希望我的回答能为这个问题增添一些价值，并且会有所帮助!!
Nimeshka Srimal answered 2018-12-22T19:35:23Z
3 votes
首先要去父节点看起来有点奇怪，是吗 JavaScript的工作原理是什么？
恕我直言：其原因与我在其他环境中看到的相同：您正在根据您对某事的“链接”执行操作。 您链接到它时无法删除它。
喜欢砍树枝。 在切割时坐在离树最近的一侧，结果将是......不幸(尽管很有趣)。
TheSatinKnight answered 2018-12-22T19:35:53Z
2 votes
这个实际上来自FireFox ......一次，IE领先于包，并允许直接删除元素。
这只是我的假设，但我相信你必须通过父母移除一个孩子的原因是由于FireFox处理引用的方式存在问题。
如果你直接调用一个对象来提交hari-kari，那么在它死后立即你仍然持有它的引用。 这有可能产生几个令人讨厌的错误...例如无法删除它，删除它但保持对它的引用看似有效，或者只是内存泄漏。
我相信当他们意识到这个问题时，解决方法是通过其父元素删除元素，因为当元素消失时，您现在只是持有对父元素的引用。 这将阻止所有这些不愉快，并且(例如，如果按节点关闭一个树节点)将很好地“压缩”。
它应该是一个容易修复的错误，但与Web编程中的许多其他内容一样，发布可能很匆忙，导致这个...当下一个版本出现时，有足够的人使用它，改变这将导致 打破一堆代码。
再一次，所有这些只是我的猜测。
然而，我确实期待有一天网络编程最终得到一个完整的春季清洁，所有这些奇怪的小特性都被清理干净，每个人都开始按照相同的规则玩。
可能是在我的机器人仆人起诉我后退工资的第二天。
SilentThunderStorm answered 2018-12-22T19:36:45Z
0 votes
据我所知，直接删除节点在Firefox中不起作用，只能在Internet Explorer中起作用。 所以，为了支持Firefox，你必须去父母去除它的孩子。
参考：[http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/]
James answered 2018-12-22T19:37:09Z
0 votes
// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
var a = d.attributes, i, l, n;
if (a) {
for (i = a.length - 1; i >= 0; i -= 1) {
n = a[i].name;
if (typeof d[n] === 'function') {
d[n] = null;
}
}
}
a = d.childNodes;
if (a) {
l = a.length;
for (i = 0; i < l; i += 1) {
domPurge(d.childNodes[i]);
}
}
}
function domRemove(id) {
var elem = document.getElementById(id);
domPurge(elem);
return elem.parentNode.removeChild(elem);
}
will Farrell answered 2018-12-22T19:37:25Z
-3 votes
这是删除没有脚本错误的元素的最佳函数：
function Remove(EId)
{
return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}
EId的注释。
这是一个等号不是EId。
如果元素EId存在，则该函数将其删除，否则返回false，而不是error。
Amin Atabakzadeh answered 2018-12-22T19:37:58Z