blocks|key|683353|text|应该在父级上调用removeChild，即：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|683354|parent.removeChild(child);|code-block|syntax|javascript|683355|在您的示例中，您应该这样做：|683356|if+(frameid)+{
++++frameid.parentNode.removeChild(frameid);
}|683357|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Node.removeChild^0|8|B|8|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.removeChild" rel="noreferrer"><code>removeChild</code></a> should be invoked on the parent, i.e.:

<pre><code>parent.removeChild(child);
</code></pre>

In your example, you should be doing something like:

<pre><code>if (frameid) {
 frameid.parentNode.removeChild(frameid);
}
</code></pre>

blocks|key|683435|text|在大多数浏览器中，从DOM中删除元素有一种比在其父元素上调用.removeChild(element)更简洁的方法，即只调用element.remove()。在适当的时候，这可能会成为从DOM中删除元素的标准和惯用方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|683436|.remove()方法在2011年被添加到DOM+Living+Standard+(commit)中，自那以后已经由Chrome、Firefox、Safari、Opera和Edge实现。任何版本的Internet+Explorer都不支持此功能。|683437|如果你想支持老的浏览器，你需要填补它。事实证明，这有点恼人，这既是因为似乎没有人创建包含这些方法的通用DOM填充程序，也因为我们不仅仅是将方法添加到单个原型中；它是ChildNode的方法，它只是规范定义的接口，JavaScript无法访问，因此我们不能向其原型中添加任何内容。因此，我们需要找到从ChildNode继承并在浏览器中实际定义的所有原型，并将.remove添加到其中。|683438|这是我想出来的垫片，我已经确认它可以在IE8中工作。|683439|(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%2B%2B)+{
++++++++var+type+=+typesToPatch[i];
++++++++if+(window[type]+&&+!window[type].prototype.remove)+{
++++++++++++window[type].prototype.remove+=+remove;
++++++++}
++++}
})();|code-block|syntax|javascript|683440|这在IE+7或更低版本中不起作用，因为extending+DOM+prototypes+isn't+possible+before+IE+8。然而，我认为，在2015年的边缘，大多数人不需要关心这些事情。|683441|一旦包含了填充程序，您就可以通过简单地调用以下方法从DOM中删除DOM元素element|683442|element.remove();|683443|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove|1|https://github.com/whatwg/dom/commit/85ff0b82bc58d01ce8e0c2f90dab04a725e31c2f|2|https://stackoverflow.com/q/597268/1709587^0|U|L|1Q|G|0|0|9|0|9|0|16|6|1|0|2A|9|45|9|4Y|7|0|0|0|J|1F|2|0|11|7|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@$9|1G|A|1H|1|1I]|$9|1J|A|1K|1|1L]]|E|$]]|$1|H|3|I|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1T|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1U|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1V|8|@]|D|@$9|1W|A|1X|1|1Y]]|E|$]]|$1|S|3|T|5|6|7|1Z|8|@$9|20|A|21|B|C]]|D|@]|E|$]]|$1|U|3|V|5|N|7|22|8|@]|D|@]|E|$O|P]]|$1|W|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]|16|$5|Z|10|11|E|$12|17]]]]

In most browsers, there's a slightly more succinct way of removing an element from the DOM than calling <code>.removeChild(element)</code> on its parent, which is to just call <code>element.remove()</code>. In due course, this will probably become the standard and idiomatic way of removing an element from the DOM.

The <a href="https://developer.mozilla.org/en-US/docs/Web/API/ChildNode.remove" rel="noreferrer"><code>.remove()</code></a> method was added to the DOM Living Standard in 2011 (<a href="https://github.com/whatwg/dom/commit/85ff0b82bc58d01ce8e0c2f90dab04a725e31c2f" rel="noreferrer">commit</a>), and has since been implemented by Chrome, Firefox, Safari, Opera, and Edge. It was not supported in any version of Internet Explorer.

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 <code>ChildNode</code>, 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 <code>ChildNode</code> and are actually defined in the browser, and add <code>.remove</code> to them.

Here's the shim I came up with, which I've confirmed works in IE 8.

<pre><code>(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&lt;typesToPatch.length; i++) {
 var type = typesToPatch[i];
 if (window[type] &amp;&amp; !window[type].prototype.remove) {
 window[type].prototype.remove = remove;
 }
 }
})();
</code></pre>

This won't work in IE 7 or lower, since <a href="https://stackoverflow.com/q/597268/1709587">extending DOM prototypes isn't possible before IE 8</a>. I figure, though, that on the verge of 2015 most people needn't care about such things.

Once you've included them shim, you'll be able to remove a DOM element <code>element</code> from the DOM by simply calling

<pre><code>element.remove();
</code></pre>

I'm trying to test if a DOM element exists, and if it does exist delete it, and if it doesn't exist create it.

<pre><code>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);
}
</code></pre>

Checking if it exists works, creating the element works, but deleting the element doesn't. Basically all this code does is inject an iframe into a webpage by clicking a button. What I would like to happen is if the iframe is already there to delete it. But for some reason I am failing.

JavaScript DOM remove element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试测试DOM元素是否存在，如果存在则删除它，如果不存在则创建它。var duskdawnkey = localStorage["duskdawnkey"];var iframe = document.createElement("iframe");var whereto = document.getElemen...

问JavaScript DOM删除元素
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript DOM删除元素EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript DOM删除元素
EN