JavaScript DOM删除元素

我试图testing一个DOM元素是否存在,如果它存在删除它,如果它不存在创build它。

var duskdawnkey = localStorage["duskdawnkey"]; var iframe = document.createElement("iframe"); var whereto = document.getElementById("debug"); var frameid = document.getElementById("injected_frame"); iframe.setAttribute("id", "injected_frame"); iframe.setAttribute("src", 'http://google.com'); iframe.setAttribute("width", "100%"); iframe.setAttribute("height", "400"); if (frameid) // check and see if iframe is already on page { //yes? Remove iframe iframe.removeChild(frameid.childNodes[0]); } else // no? Inject iframe { whereto.appendChild(iframe); // add the newly created element and it's content into the DOM my_div = document.getElementById("debug"); document.body.insertBefore(iframe, my_div); } 

检查它是否存在,创build元素工作,但删除元素不。 基本上所有这些代码是通过点击一个button注入一个iframe到网页。 我想要发生的是如果iframe已经在那里删除它。 但由于某种原因,我失败了。

应该在父对象上调用removeChild ,即:

 parent.removeChild(child); 

在你的例子中,你应该做的是这样的:

 if (frameid) { frameid.parentNode.removeChild(frameid); } 

在大多数浏览器中,从DOM中删除一个元素的方法要比调用element.remove()调用.removeChild(element)更简洁一些。 在适当的时候,这可能会成为从DOM中删除元素的标准和惯用的方式。

.remove()方法在2011年被添加到DOM Living标准中,并且已经被Chrome,Firefox,Safari,Opera和Edge实现。 它在任何版本的Internet Explorer中都不受支持。

如果你想支持旧的浏览器,你需要填充它。 事实certificate,这有点让人恼火,因为似乎没有人能够制作出包含这些方法的通用DOM垫片,而且因为我们不只是将这种方法join到一个原型中; 这是一个ChildNode的方法,它只是一个由规范定义的接口,不能被JavaScript访问,所以我们不能在它的原型中添加任何东西。 因此,我们需要find所有从ChildNodeinheritance的原型,并且在浏览器中实际定义的原型,然后向它们添加.remove

这是我想出来的垫片,我已经确认在IE 8中工作。

 (function () { var typesToPatch = ['DocumentType', 'Element', 'CharacterData'], remove = function () { // The check here seems pointless, since we're not adding this // method to the prototypes of any any elements that CAN be the // root of the DOM. However, it's required by spec (see point 1 of // https://dom.spec.whatwg.org/#dom-childnode-remove) and would // theoretically make a difference if somebody .apply()ed this // method to the DOM's root node, so let's roll with it. if (this.parentNode != null) { this.parentNode.removeChild(this); } }; for (var i=0; i<typesToPatch.length; i++) { var type = typesToPatch[i]; if (window[type] && !window[type].prototype.remove) { window[type].prototype.remove = remove; } } })(); 

这在IE 7或更低版​​本中不起作用,因为在IE 8之前扩展DOM原型是不可能的 。 但我认为,在2015年的时候,大多数人不需要关心这样的事情。

一旦你包含了shim,你就可以通过简单的调用来从DOM中删除一个DOM元素element

 element.remove(); 

似乎我没有足够的代表发表评论,所以另一个答案将不得不做。

当你使用removeChild()或者通过在parent上设置innerHTML属性来解除链接时,还需要确保没有别的东西引用它,否则它将不会被销毁,并且会导致内存泄漏。 有很多方法可以在调用removeChild()之前引用节点,并且必须确保没有超出范围的引用被明确删除。

Doug Crockford在这里写道,事件处理程序在IE中被称为循环引用的原因,并build议在调用removeChild()之前,

 function purge(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) { purge(d.childNodes[i]); } } } 

即使你采取了很多预防措施,你仍然可以在IE中获取内存泄漏,正如Jens-Ingo Farley所描述的那样。

最后,不要陷入思考Javascript 删除就是答案的陷阱。 这似乎是很多人的build议,但不会做这项工作。 这里是关于Kangax 删除的一个很好的参考。

使用Node.removeChild()为你做这个工作,只需使用这样的东西:

 var leftSection = document.getElementById('left-section'); leftSection.parentNode.removeChild(leftSection); 

在DOM 4中,应用了remove方法,但根据W3C的浏览器支持不佳:

node.remove()方法在DOM 4规范中实现。 但由于浏览器支持不佳,您不应该使用它。

但是,如果你使用jQuery,你可以使用remove方法…

 $('#left-section').remove(); //using remove method in jQuery 

在新的框架中,像你可以使用条件去除一个元素,例如*ngIf在Angular和React中,呈现不同的视图,取决于条件…