首页  >  文章  >  web前端  >  如何在 JavaScript 中正确删除 DOM 元素?

如何在 JavaScript 中正确删除 DOM 元素?

Barbara Streisand
Barbara Streisand原创
2024-10-31 20:38:29820浏览

How to Properly Remove DOM Elements in JavaScript?

JavaScript DOM - 删除元素

在 JavaScript 中,使用文档对象模型 (DOM) 时,删除元素是一项常见任务。当需要从 DOM 中删除现有元素时,可以使用removeChild方法。

一种常见的场景是测试元素是否存在,如果存在则删除它,如果不存在则创建它。这种方法确保仅在元素尚不存在时才创建该元素。

考虑以下代码:

<code class="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);
}</code>

在此代码中,检查 iframe 是否存在并创建如果不存在,它会按预期工作。然而,尝试使用 iframe.removeChild(frameid.childNodes[0]) 删除 iframe 失败。

错误在于 iframe.removeChild 的使用。应该在要删除的元素的父元素上调用removeChild 方法。在这种情况下,frameid 的父元素是 body 元素。因此,正确的去除方法是:

<code class="javascript">if (frameid) {
  frameid.parentNode.removeChild(frameid);
}</code>

以上是如何在 JavaScript 中正确删除 DOM 元素?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn