Question

使用标准JavaScript删除元素时，必须首先转到其父级：

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

首先必须转到父节点对我来说有点奇怪，JavaScript是否有这样的原因？

Answer 1

我知道增加原生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的更多信息，请阅读此article。

编辑：在2019年回顾我的回答，node.remove()已经解决了，可以按照以下方式使用（没有上面的polyfill）：

document.getElementById("my-element").remove();

或

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

这些功能在所有现代浏览器（不是IE）中都可用。详细了解MDN。

Answer 2

Crossbrowser和IE＆gt; = 11：

document.getElementById("element-id").outerHTML = "";

Answer 3

你可以制作一个remove函数，这样你就不用每次都考虑它了：

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

Answer 4

It's what the DOM supports。搜索该页面以“删除”或“删除”，removeChild是唯一删除节点的页面。

Answer 5

DOM在节点树中组织，其中每个节点都有一个值，以及对其子节点的引用列表。所以element.parentNode.removeChild(element)模仿内部发生的事情：首先你去父节点，然后删除对子节点的引用。

从DOM4开始，提供了一个辅助函数来执行相同的操作：element.remove()。这个works in 87% of browsers（截至2016年），但不是IE 11.如果您需要支持旧浏览器，您可以：

通过父节点删除元素，如the question，
修改原生DOM功能，如Johan Dettmar's answer或
使用DOM4 polyfill。

Answer 6

删除一个元素：

 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]);

Answer 7

您可以使用element.remove()

Answer 8

ChildNode.remove()方法从它所属的树中删除对象。

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

这是一个小提琴，展示了如何调用document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

无需扩展NodeList。它已经实施。

**

Answer 9

使用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元素在某些开发人员眼中几乎没有闪烁。

Answer 10

必须先去父节点对我来说有点奇怪，难道JavaScript会这样工作吗？

函数名称为removeChild()，在没有父级的情况下如何删除子级？：）

另一方面，您并不一定总是像显示的那样调用它。 element.parentNode只是获取给定节点的父节点的助手。如果您已经知道父节点，则可以像这样使用它：

例如：

// 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

================================================ ==========

要添加更多内容：

一些答案指出，可以使用parentNode.removeChild(child);来代替elem.remove();。但是，正如我注意到的那样，这两个功能之间存在差异，而这些答案中并未提及。

如果使用removeChild()，它将返回对已删除节点的引用。

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中可以观察到此行为。我相信这是值得注意的：）

希望我的回答为问题增加一些价值，并且会有所帮助！

Answer 11

根据DOM级别4规范（即开发中的当前版本），可以使用一些新的便捷变异方法：append()，prepend()，before()，after() ，replace()和remove()。

http://red-team-design.com/removing-an-element-with-plain-javascript-remove-method/

Answer 12

您可以使用DOM的remove()方法直接删除该元素。

这是一个例子：

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

Answer 13

首先必须转到父节点对我来说有点奇怪，是吗？ JavaScript的工作原理是什么？

恕我直言：其原因与我在其他环境中看到的相同：您正在根据您的＆＃34;链接＆＃34;进行操作。某事。在您与其关联时，您无法将其删除。

像切割树枝一样。在切割时坐在离树最近的一侧，结果将是......不幸（虽然很有趣）。

Answer 14

这个实际上来自FireFox ...曾经一度，IE领先于包，并允许直接删除元素。

这只是我的假设，但我相信您必须通过父母删除孩子的原因是FireFox处理引用的方式存在问题。

如果你直接调用一个对象来提交hari-kari，那么在它死后立即，你仍然持有它的引用。这有可能产生几个令人讨厌的错误...例如无法删除它，删除它但保持对它的引用看似有效，或者只是内存泄漏。

我相信当他们意识到这个问题时，解决方法是通过其父元素删除元素，因为当元素消失时，您现在只是持有对父元素的引用。这样可以阻止所有这些不愉快，并且（例如，如果按节点关闭一个树节点）将会很好地“压缩”。

它应该是一个容易修复的错误，但与网络编程中的许多其他内容一样，发布可能很匆忙，导致这个......当下一个版本出现时，有足够多的人使用它来改变这会导致破坏一堆代码。

同样，所有这些只是我的猜测。

然而，我确实期待有一天网页编程最终得到一个完整的春季清洁，所有这些奇怪的小特质都得到了清理，每个人都开始按照相同的规则进行游戏。

可能是我的机器人仆人起诉我后退工资的第二天。

Answer 15

最短

我改进了Sai Sunder answer，因为OP使用的ID可以避免getElementById：

elementId.remove();

box2.remove();          // remove BOX 2

this["box-3"].remove(); // remove BOX 3 (for Id with 'minus' character)

<div id="box1">My BOX 1</div>
<div id="box2">My BOX 2</div>
<div id="box-3">My BOX 3</div>
<div id="box4">My BOX 4</div>

Answer 16

// 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);
}

Answer 17

据我所知，直接删除节点在Firefox中不起作用，只能在Internet Explorer中起作用。因此，要支持Firefox，您必须转到父级才能删除它的孩子。

参考：http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

Answer 18

您可以简单地使用

document.getElementById("elementID").outerHTML="";

它在所有浏览器中都可以使用，甚至在Internet Explorer上也可以。

Answer 19

这是删除没有脚本错误的元素的最佳函数：

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

EObj=document.getElementById(EId)注意。

这是一个等号而非==。

如果元素EId存在，则函数将其删除，否则返回false，而不是error。

按ID删除元素

19 个答案:

无需扩展NodeList。它已经实施。

最短