JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでIDを指定して要素を削除する方法

JavaScriptでIDを指定して要素を削除する

IDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。

コード例

以下は実際のサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   <h1 id="demo">Hello</h1>
   <p id="demo1">This is my paragraph</p>
</body>
<script>
   document.getElementById("demo").remove();
</script>
</html>

このコードでは、まずgetElementById("demo")でid属性が「demo」のh1要素を取得し、続けてremove()を呼び出すことで、その要素をページから削除しています。実行後は「Hello」という見出しが画面から消え、段落だけが表示されます。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「index.html」などの任意の名前（拡張子は.html）で保存します。次に、VS Codeエディタでそのファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。

実行結果

上記のコードを実行すると、以下のような出力が得られます。

JavaScriptでIDを指定して要素を削除する方法

補足：古いブラウザへの対応

remove()メソッドは比較的新しいブラウザでサポートされています。Internet Explorerなどの旧ブラウザにも対応させたい場合は、親ノードのremoveChild()メソッドを代わりに使用する方法があります。

var element = document.getElementById("demo");
element.parentNode.removeChild(element);

どちらの方法でも、指定したIDの要素を確実にDOMから削除することができます。用途や対応ブラウザに合わせて使い分けるとよいでしょう。

  1. JavaScriptでelement.classListをクリアする方法｜remove()の使い方を解説

    JavaScriptで要素のクラスをクリア（削除）するには、classList.remove()メソッドを使用します。このメソッドを使えば、指定したクラス名だけを簡単に取り除くことができます。 classList.remove()の基本 classList.remove()は、削除したいクラス名を引数として渡すだけで動作します。カンマ区切りで複数のクラス名を指定すれば、同時に複数のクラスを削除することも可能です。 サンプルコード 以下は、ボタンをクリックすると要素からクラスを削除する実装例です。 <!DOCTYPE html> <html lang="en"

  2. HTMLの引用タグの使い方を解説！q要素とblockquote要素の違いとは

    HTMLには、他の情報源から引用した文章を適切に表現するための専用タグが用意されています。代表的なものが、短い引用を定義する<q>タグと、別ソースから引用したセクション全体を定義する<blockquote>タグです。両者の大きな違いは要素の種類にあります。<q>タグはインライン要素として機能し、文章中に自然な形で引用文を埋め込めます。一方、<blockquote>タグはブロックレベル要素で、独立した引用ブロックとして表示されます。多くのブラウザでは、<q>タグで囲んだテキストには二重引用符（ ）が自動的に付与され、<blockq