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