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

HTML DOMのremoveChild()メソッドとは？使い方とサンプルコードを解説

DOMのremoveChild()メソッドは、HTML文書内の指定された親ノードから、指定した子ノードを削除し、その削除されたノードを戻り値として返します。要素を動的に操作したい場合に非常に便利なメソッドです。

構文

removeChild()メソッドの基本構文は以下の通りです。

node.removeChild(node);

パラメータ

  • node：削除対象となる子ノードを指定します。

戻り値

削除された子ノードが返されます。この戻り値を変数に保持しておけば、後で同じノードを再挿入することも可能です。

サンプルコード

ここでは、ボタンをクリックするたびにリストから科目を1つずつ削除する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.2rem;
    }
    ul{
        list-style-type: none;
        padding:0;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:50%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>Student Subjects</h1>
<p>Hi, My favourite subjects are:</p>
<ul id="subjectList">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>English</li>
</ul>
<button onclick="removeSubject()" class="btn">Remove Subject</button>
<script>
    function removeSubject() {
        var subList = document.getElementById("subjectList");
        if (subList.hasChildNodes()) {
            subList.removeChild(subList.childNodes[0]);
        }
    }
</script>
</body>
</html>

コードのポイント

  • document.getElementById("subjectList")で、IDが「subjectList」のul要素を取得しています。
  • hasChildNodes()メソッドで、リストに子ノードが残っているかどうかを確認してから削除処理を行うことで、空のリストに対するエラーを防いでいます。
  • childNodes[0]を指定することで、リストの先頭にある要素（最初の
  • 要素）が順番に削除されます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのremoveChild()メソッドとは？使い方とサンプルコードを解説

「Remove Subject」ボタンをクリックすると、クリックするたびにリストの先頭から科目が1つずつ削除されていきます。

HTML DOMのremoveChild()メソッドとは？使い方とサンプルコードを解説

  1. HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説

    HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで

  2. HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説

    HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや