JavaScript DOM 移除元素

IT技术 javascript dom
2021-01-26 11:17:16

我试图测试一个 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 已经存在以将其删除。但由于某种原因,我失败了。

4个回答

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

parent.removeChild(child);

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

if (frameid) {
    frameid.parentNode.removeChild(frameid);
}
此解决方案可能还不够。如果有人正在阅读本文,请查看 Glenn 的建议
2021-03-20 11:17:16
谢谢,在我读你的帖子之前就明白了。不得不将其更改为 whereto.removeChild(whereto.childNodes[0]);
2021-04-07 11:17:16
假设您的框架始终是debugdiv的第一个孩子,这也将起作用UsingparentNode是一种更通用的解决方案,适用于任何元素。
2021-04-10 11:17:16

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

.remove()方法于 2011 年被添加到 DOM Living Standard(提交)中,此后被 Chrome、Firefox、Safari、Opera 和 Edge 实现。任何版本的 Internet Explorer 都不支持它。

如果您想支持较旧的浏览器,则需要对其进行填充。事实证明这有点令人恼火,因为似乎没有人制作包含这些方法的通用 DOM shim,而且因为我们不只是将方法添加到单个原型;它是 的一个方法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 年即将到来之际,大多数人不需要关心这些事情。

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

element.remove();
只需将其留在这里:polyfill.io/v2/docs/features/#Element_prototype_remove如果您包含该 automagic polyfill 服务,您将获得对 IE 7 的支持。
2021-03-13 11:17:16
只要你不关心IE,这绝对是2017年的做法。请参阅:developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove
2021-04-04 11:17:16

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

当您使用 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 中出现内存泄漏,如 Jens-Ingo Farley此处所述

最后,不要陷入认为 Javascript删除就是答案的陷阱许多人似乎建议这样做,但不会完成这项工作。这里是了解Kangax删除一个很好的参考

我确认这种行为。我的框架在 dom 布局上使用 Javascript 对象映射树。每个 js 对象都引用其 dom 元素。即使我调用element.parentNode.removeChild删除元素,它们仍然存在并且仍然可以被引用。它们只是在常规 dom 树中不可见。
2021-03-11 11:17:16
是的,然后删除指向该 js 映射对象的全局指针会神奇地解锁垃圾收集器。这是对已接受答案的重要补充。
2021-03-14 11:17:16
也许你可以展示一些 jsFiddle 来证明这一点。谢谢
2021-03-28 11:17:16

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

如果您使用 createElement 在 js 中创建模态节点,则只需确保在删除节点之前检查该节点是否存在。 if(leftSection){ ..your code }应该可以完成这项工作。
2021-03-27 11:17:16