JavaScript DOM删除元素

Question

我正在尝试测试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已经在那里删除它.但由于某种原因,我失败了.

Answer 1

removeChild 应该在父级上调用,即:

parent.removeChild(child);

在您的示例中,您应该执行以下操作:

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

Answer 2

在大多数浏览器中,从DOM中删除一个元素的方法稍微简洁一些,只需要调用.removeChild(element)它的父节点即可element.remove().在适当的时候,这可能会成为从DOM中删除元素的标准和惯用方法.

该.remove()方法已于2011年(提交)添加到DOM Living Standard中,并已由Chrome,Firefox,Safari,Opera和Edge实施.任何版本的Internet Explorer都不支持它.

如果您想支持旧版浏览器,则需要对其进行填充.事实证明这有点令人恼火,因为似乎没有人制作包含这些方法的通用DOM垫片,因为我们不只是将方法添加到单个原型中; 它是一种方法ChildNode,它只是一个由规范定义的接口,不能被JavaScript访问,所以我们不能向它的原型添加任何东西.因此,我们需要找到继承自ChildNode并在浏览器中实际定义的所有原型,并添加.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中,你就可以element通过简单的调用从DOM中删除一个DOM元素

element.remove();

Answer 3

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

当您使用removeChild()取消链接节点或通过在父节点上设置innerHTML属性时,您还需要确保没有其他任何引用它,否则它实际上不会被销毁并将导致内存泄漏.在调用removeChild()之前,您可以通过多种方式获取对节点的引用,并且必须确保明确删除那些未超出范围的引用.

Doug Crockford在这里写道,事件处理程序是IE中循环引用的原因,并建议在调用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 这里.

最后,不要陷入认为Javascript 删除是答案的陷阱.它似乎被很多人建议,但不会做这个工作.这是理解Kangax 删除的一个很好的参考.

Answer 4

使用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中,渲染不同的视图,取决于条件......