HTML DOM Select remove()メソッドの使い方を徹底解説！ドロップダウンリストから選択肢を削除する方法

HTML DOM の select remove() メソッドは、HTML ドキュメント内のドロップダウンリスト（<select> 要素）から、指定したオプション（選択肢）を削除するためのメソッドです。ユーザーの操作に応じて動的にリストの内容を変更したい場合に非常に便利です。

構文

remove() メソッドの基本的な構文は以下のとおりです。

object.remove(index)

index には、削除したいオプションのインデックス番号を指定します。インデックスは 0 から始まる点に注意してください。つまり、最初の選択肢を削除する場合は「0」、2番目の選択肢を削除する場合は「1」を指定します。

サンプルコード

ここでは、実際に remove() メソッドを使って、ドロップダウンリストから特定の科目を削除する例を見てみましょう。ボタンをクリックすると、リストの先頭にある「Physics（物理）」が削除される仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    .drop-down{
        display:block;
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:2px;
        margin:1rem auto;
        outline:none;
    }
    .btn{
        background:orange;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        font-weight:bold;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Select remove() メソッドのデモ</h1>
<p>好きな科目を選んでください：</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Biology</option>
<option>Maths</option>
</select>
<button type="button" onclick="addSubject()" class="btn">Physics を削除する</button>
<div class="show"></div>
<script>
    function addSubject() {
        var dropDown = document.querySelector(".drop-down");
        document.querySelector(".show").innerHTML="Removed Physics Subject";
        dropDown.remove(0);
    }
</script>
</body>
</html>

コードのポイント

document.querySelector(".drop-down") で、クラス名「drop-down」を持つ <select> 要素を取得しています。
dropDown.remove(0) により、インデックス 0（＝最初の選択肢）である「Physics」が削除されます。
削除後、.show クラスの div 要素にメッセージを表示して、処理が完了したことをユーザーに伝えています。

実行結果

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

HTML DOM Select remove()メソッドの使い方を徹底解説！ドロップダウンリストから選択肢を削除する方法

初期状態では、「Physics」「Biology」「Maths」の3つの選択肢がドロップダウンリストに含まれています。

ここで「Physics を削除する」ボタンをクリックすると、リストの先頭にある「Physics」が削除され、残りの選択肢だけが表示されます。

HTML DOM Select remove()メソッドの使い方を徹底解説！ドロップダウンリストから選択肢を削除する方法

まとめ

select remove() メソッドを使えば、JavaScript だけでドロップダウンリストの選択肢を簡単に削除できます。引数に渡すインデックス番号を変えることで、任意の位置のオプションを操作できるため、動的なフォームやフィルタリング機能など、さまざまな場面で活用できます。なお、すべての選択肢を削除したい場合は length = 0 を設定する方法もあり、用途に応じて使い分けるとよいでしょう。

HTML DOM Optionオブジェクトとは？作成方法から主要プロパティまで解説

HTML DOM Select add()メソッドの使い方をわかりやすく解説

HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーンページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせるバリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動するモーダルウィンドウを開いたときに、特定のボタンや
HTML DOM Textareaのselect()メソッドとは？使い方とサンプルコードを解説
HTML DOM の Textarea select() メソッドは、HTMLドキュメント内のテキストエリア（textarea要素）の内容をプログラムから一括選択するためのメソッドです。このメソッドを呼び出すと、ユーザーがマウスやキーボードでドラッグして選択したときと同じように、テキストエリア内のすべてのテキストが選択状態になります。構文select() メソッドの基本的な構文は以下のとおりです。引数は不要で、対象の textarea 要素に対してそのまま呼び出します。object.select()それでは、HTML DOM Textarea select() メソッドの具体的な使用例を見てい