JavaScript DOM remove element

javascript dom

2022-08-30 01:11:18

我试图测试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已经存在以删除它。但出于某种原因，我失败了。

答案 1

removeChild 应该在父级上调用，即：

parent.removeChild(child);

在您的示例中，您应该执行如下操作：

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

答案 2

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

.remove（） 方法于 2011 年被添加到 DOM Living Standard （commit）中，此后由 Chrome、Firefox、Safari、Opera 和 Edge 实现。它在任何版本的Internet Explorer中都不受支持。

如果要支持较旧的浏览器，则需要填充它。事实证明，这有点令人讨厌，因为似乎没有人制作出包含这些方法的通用DOM填充程序，并且因为我们不只是将方法添加到单个原型中;它是的一种方法，它只是规范定义的一个接口，JavaScript 无法访问，因此我们无法在其原型中添加任何内容。因此，我们需要找到所有从浏览器中继承并在浏览器中实际定义的原型，并将其添加到其中。ChildNodeChildNode.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年即将来临之际，大多数人都不需要关心这些事情。

包含它们填充程序后，只需调用即可从 DOM 中删除 DOM 元素element

element.remove();