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 メソッドが使用されます。

一般的なシナリオの 1 つは、要素の存在をテストし、存在する場合は削除するか、存在しない場合は作成することです。このアプローチにより、要素がまだ存在しない場合にのみ作成されることが保証されます。

次のコードを考えてみましょう:

<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 を作成します。存在しない場合は意図したとおりに動作します。ただし、iframe.removeChild(frameid.childNodes[0]) を使用して iframe を削除しようとすると失敗します。

エラーは iframe.removeChild の使用にあります。 RemoveChild メソッドは、削除される要素の親に対して呼び出す必要があります。この場合、frameid の親は body 要素です。したがって、正しい削除方法は次のとおりです:

<code class="javascript">if (frameid) {
  frameid.parentNode.removeChild(frameid);
}</code>
ログイン後にコピー

以上がJavaScript で DOM 要素を適切に削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!