按ID删除元素

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的更多信息,请阅读本文.

Answer 2

Crossbrowser和IE> = 11:

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

Answer 3

你可以创建一个remove函数,这样你就不必每次都考虑它:

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

Answer 4

这是DOM支持的内容.搜索该页面以"删除"或"删除",removeChild是唯一删除节点的页面.

Answer 5

DOM在节点树中组织,其中每个节点都有一个值,以及对其子节点的引用列表.因此,element.parentNode.removeChild(element)模仿内部发生的事情:首先,您转到父节点,然后删除对子节点的引用.

从DOM4开始,提供了一个辅助函数来做同样的事情:element.remove().这适用于87%的浏览器(截至2016年),但不适用于IE 11.如果您需要支持旧版浏览器,您可以:

• 通过父节点删除元素,如问题所示,
• 修改本机DOM函数,如Johan Dettmar的答案,或
• 使用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

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

这是一个例子：

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

Answer 9

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

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

这是一个小提琴,展示了你如何打电话 document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

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

**

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/zh-CN/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/zh-CN/docs/Web/API/ChildNode/remove

在Chrome和FF中可以观察到此行为。我相信这是值得注意的:)

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

Answer 11

使用ele.parentNode.removeChild(ele)的函数不适用于您已创建但尚未插入HTML的元素.像jQuery和Prototype这样的库明智地使用类似下面的方法来规避这种限制.

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

我认为JavaScript的工作方式与此类似,因为DOM的原始设计者将父/子和上一/下一导航作为比当今如此流行的DHTML修改更高的优先级.能够从一个<input type ='text'>读取并通过DOM中的相对位置写入另一个是有用的,在90年代中期,动态生成整个HTML表单或交互式GUI元素的时间几乎没有闪烁.一些开发人员的眼睛.

Answer 12

你可以简单地使用

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

它适用于所有浏览器，甚至适用于 Internet Explorer。

Answer 13

据DOM 4级规格,这是当前版本的发展,出现了一些新得心应手突变方法可供选择:append(),prepend(),before(),after(),replace(),和remove().

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

Answer 14

最短的

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

elementId.remove();

elementId.remove();

box2.remove();          // remove BOX 2

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