首頁 > web前端 > js教程 > 主體

如何在 JavaScript 中正確刪除 DOM 元素?

Barbara Streisand
發布: 2024-10-31 20:38:29
原創
743 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!