首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaScript DOM删除元素

JavaScript DOM删除元素
EN

Stack Overflow用户
提问于 2012-01-12 14:06:29
回答 2查看 350.3K关注 0票数 210

我正在尝试测试DOM元素是否存在,如果存在则删除它,如果不存在则创建它。

代码语言:javascript
复制
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已经在那里删除它。但由于某种原因,我失败了。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-01-12 14:12:00

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

代码语言:javascript
复制
parent.removeChild(child);

在您的示例中,您应该这样做:

代码语言:javascript
复制
if (frameid) {
    frameid.parentNode.removeChild(frameid);
}
票数 348
EN

Stack Overflow用户

发布于 2014-12-20 05:46:41

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

.remove()方法在2011年被添加到DOM Living Standard (commit)中,自那以后已经由Chrome、Firefox、Safari、Opera和Edge实现。任何版本的Internet Explorer都不支持此功能。

如果你想支持老的浏览器,你需要填补它。事实证明,这有点恼人,这既是因为似乎没有人创建包含这些方法的通用DOM填充程序,也因为我们不仅仅是将方法添加到单个原型中;它是ChildNode的方法,它只是规范定义的接口,JavaScript无法访问,因此我们不能向其原型中添加任何内容。因此,我们需要找到从ChildNode继承并在浏览器中实际定义的所有原型,并将.remove添加到其中。

这是我想出来的垫片,我已经确认它可以在IE8中工作。

代码语言:javascript
复制
(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或更低版本中不起作用,因为extending DOM prototypes isn't possible before IE 8。然而,我认为,在2015年的边缘,大多数人不需要关心这些事情。

一旦包含了填充程序,您就可以通过简单地调用以下方法从DOM中删除DOM元素element

代码语言:javascript
复制
element.remove();
票数 90
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8830839

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档