我试图测试一个DOM元素是否存在，如果它存在，删除它，如果它不存在，创建它。
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);
}
检查它是否存在可以，创建元素可以，但删除元素则不行。基本上，所有这些代码都是通过单击按钮将iframe注入到网页中。我想发生的是，如果iframe已经在那里删除它。但不知为何，我失败了。
似乎我没有足够的代表发表评论，所以另一个答案将不得不做。
当您使用removecchild()或在父节点上设置innerHTML属性解除链接时，还需要确保没有其他引用它，否则它实际上不会被销毁并导致内存泄漏。在调用removeChild()之前，有很多方法可以获取对节点的引用，并且必须确保显式删除那些没有超出作用域的引用。
Doug Crockford在这里写道，事件处理程序是IE中循环引用的原因之一，并建议在调用removecchild()之前显式地删除它们，如下所示
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删除就是答案。这似乎是许多人的建议，但并不管用。这里有一个很好的关于理解Kangax删除的参考。
在大多数浏览器中，有一种比在其父元素上调用. removecchild (element)更简洁的方法来从DOM中删除元素，即调用element.remove()。在适当的时候，这可能会成为从DOM中删除元素的标准和惯用方法。
.remove()方法于2011年被添加到DOM Living Standard(提交)中，此后Chrome、Firefox、Safari、Opera和Edge都实现了该方法。任何版本的ie浏览器都不支持它。
If you want to support older browsers, you'll need to shim it. This turns out to be a little irritating, both because nobody seems to have made a all-purpose DOM shim that contains these methods, and because we're not just adding the method to a single prototype; it's a method of ChildNode, which is just an interface defined by the spec and isn't accessible to JavaScript, so we can't add anything to its prototype. So we need to find all the prototypes that inherit from ChildNode and are actually defined in the browser, and add .remove to them.
这是我想出的垫片，我已经确认在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;
}
}
})();
这在ie7或更低版本中行不通，因为在ie8之前扩展DOM原型是不可能的。不过，我认为，在2015年即将到来之际，大多数人都不需要关心这些事情。
一旦您将它们包含在shim中，您将能够通过简单地调用从DOM中删除DOM元素
element.remove();
使用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
另外，在新的框架中，比如你可以使用条件来移除一个元素，比如Angular和React中的*ngIf，渲染不同的视图取决于条件…
