关于javascript：按ID删除元素


Remove element by id

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

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

对于我来说，必须先转到父节点似乎有点奇怪，是否有原因让javascript这样工作？

相关讨论

我知道增强本地DOM函数并不总是最好或最流行的解决方案，但对于现代浏览器来说，这很好。

1
2
3
4
5
6
7
8
9
10
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]);
        }
    }
}

然后你可以删除这样的元素

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

。

或

1
document.getElementsByClassName("my-elements").remove();

。

注：此解决方案不适用于IE 7及以下版本。有关扩展DOM的更多信息，请阅读本文。

编辑：回顾我在2019年的回答，node.remove()已经获救，可按如下方式使用(不含上面的polyfill)：

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

。

或

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

。

这些功能在所有现代浏览器(而不是IE)中都可用。阅读有关MDN的更多信息。

相关讨论

CrossBrowser和IE>=11：

1
document.getElementById("element-id").outerHTML ="";
相关讨论

您可以创建一个remove函数，这样您就不必每次都考虑它：

1
2
3
4
function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}
相关讨论

这是DOM所支持的。在该页面中搜索"删除"或"删除"，并且removechild是唯一删除节点的页面。

相关讨论

在DOM树中的节点A学院的定制，在每个节点有一个值的列表，以及一个引用它的子节点。因此element.parentNode.removeChild(element)mimics到底发生什么事：第一，你去漫游在父节点，然后删除参考节点的儿童。

作为辅助功能是提供一dom4，做同样的事情：element.remove()。本厂在87 %的浏览器(如IE，但不是2016年)的11。如果你需要支持旧的浏览器，你可以：

  • 通过删除元素的父节点，在这样的问题，
  • 在本地修改DOM函数，如约翰德特马的回答，或
  • 使用dom4 polyfill。
相关讨论

移除一个元件：

1
2
 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

。

用于删除具有特定类名的所有元素：

1
2
3
4
 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]);

号

相关讨论

你只需使用element.remove()。

相关讨论

的方法和ChildNode.remove()removes对象树是属于它的。

http：／／developer.mozilla.org /美国/文档/ / / / / childnode Web API

这里是一个你的小提琴表演呼叫document.getElementById('my-id').remove()CAN

http：/ / / / 52kp584l jsfiddle.net

* * * * * * * * * * * * * *

有没有需要的扩展列表。它已经已经实现。

* * * * * * * * * * * * * *

相关讨论

Having to go to the parent node first seems a bit odd to me, is there a reason JavaScript works like this?

该函数的名字是removeChild()，和如何它可能解除儿童在没有父母吗？：)

在其他的手，你并不总是要调用它，你必须显示。element.parentNode是只有一个助手把给定的父节点的节点。如果你已经知道父节点，你可以使用它像这样：

前：

1
2
3
4
// 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);

http：／／developer.mozilla.org /美国/文档/ /节点/网络/ API removechild

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

添加更多的东西：

有一些答案，而不是使用parentNode.removeChild(child);角退出，你可以使用elem.remove();。但我已经注意到，有一个之间的差异的两个函数，它需要保持在这些答案。

如果你想使用removeChild()，它返回一个从参考节点。

1
2
var removedChild = element.parentNode.removeChild(element);
console.log(removedChild); //will print the removed child.

但如果你使用elem.remove();，它不会返回你的参考。

1
2
var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

http：／／developer.mozilla.org /美国/文档/ / / / / childnode Web API

这个行为可以观察和铬。我相信它的价值noticing：)

希望我的答案添加一些值的问题，将帮助！！

使用ele.parentnode.removechild(ele)的函数不能用于您已经创建但尚未插入到HTML中的元素。像jquery和prototype这样的库明智地使用如下方法来避免这种限制。

1
2
3
4
5
_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

号

我认为JavaScript的工作原理是这样的，因为DOM的原始设计人员将父/子和前/下一个导航作为比当前流行的DHTML修改更高的优先级。在90年代中期，能够从一个中读取数据并通过DOM中的相对位置向另一个位置写入数据是很有用的，当时整个HTML表单或交互式GUI元素的动态生成在某些开发人员眼中几乎是一闪而过的。

根据DOM Level 4规格，这是目前的版本有一些新的发展，使用手机的方法：append()突变，prepend()，before()after()replace()remove()，，，和。

http：／／red-team-design.com /删除到元与普通的JavaScript /删除方法

Having to go to the parent node first seems a bit odd to me, is there
a reason JavaScript works like this?

我的理由是：这是一样的我见过的其他环境：你是基于你的表演动作的"链接"到的东西。你不能删除它，你用它。

样切割树的肢体。坐在靠近侧closest while或树切割的结果将是……不幸的(非常有趣)。

这个来自火狐…有一次，Ie领先于包装，允许直接取出一个元件。

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

如果您调用一个对象来直接提交hari kari，那么在它死后，您仍然持有对它的引用。这有可能造成几个讨厌的虫子…例如，未能删除它、删除它但保持对它的引用看起来有效，或者只是内存泄漏。

我相信，当他们意识到这个问题时，解决方法是通过父元素删除一个元素，因为当该元素消失时，您现在只是持有对父元素的引用。这将停止所有的不愉快，并且(例如，如果一个节点一个节点地关闭一个树节点)将"压缩"得相当好。

这应该是一个很容易修复的bug，但是和Web编程中的其他许多事情一样，发布可能很匆忙，导致了这一点……当下一个版本出现时，有足够多的人在使用它，改变它将导致破坏一堆代码。

再说一次，所有这些只是我的猜测。

不过，我还是很期待有一天，Web编程终于得到了全面的春季大扫除，所有这些奇怪的小怪癖都被清理干净了，每个人都开始按照相同的规则玩起来。

可能是在我的机器人仆人起诉我要回工资的第二天。

相关讨论

据我所知，直接删除节点在Firefox中不起作用，只有Internet Explorer。所以，为了支持火狐，你必须向父服务器请求删除它的子服务器。

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

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 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);
}

。

这是在不出现脚本错误的情况下删除元素的最佳函数：

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

EObj=document.getElementById(EId)注。

这是一个等号，不是==。

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

相关讨论