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

JavaScriptでドロップダウンリストからオプションを削除する方法

ドロップダウンリスト（セレクトボックス）からオプションを削除するには、JavaScriptの remove() メソッドを使用します。このメソッドは、引数に指定したインデックス番号に対応するオプション要素を削除します。削除したいオプションは、ユーザーが選択中の項目（selectedIndex）として指定するのが一般的です。

以下のサンプルコードを実行して、実際にドロップダウンからオプションを削除する動作を確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <form id = "myForm">
         <select id = "selectNow">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
         </select>
         <input type = "button" onclick = "remove()" value = "Click to Remove">
      </form>
      <p>Select and click the button to remove the selected option.</p>
      
      <script>
         function remove() {
            var x = document.getElementById("selectNow");
            x.remove(x.selectedIndex);
         }
      </script>
      
   </body>
</html>

コードの解説

このサンプルでは、「One」「Two」「Three」の3つのオプションを持つセレクトボックスと、削除用のボタンを配置しています。ボタンがクリックされると remove() 関数が呼び出され、document.getElementById() で取得した select 要素に対して remove(x.selectedIndex) を実行します。

selectedIndex プロパティは、現在選択されているオプションのインデックス番号（0から始まる）を返します。そのため、オプションを選択した状態でボタンをクリックすると、選択されていた項目だけがリストから取り除かれます。

なお、特定のインデックスを直接指定して削除することも可能です。例えば x.remove(0) とすれば、常に先頭のオプションが削除されます。また、すべてのオプションを一括で消したい場合は、x.options.length = 0; のように length プロパティを0に設定する方法も便利です。

  1. JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】

    JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。 サンプルコード 以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。 <!DOCTYPE html> <html> <head> <meta name="viewpor

  2. JavaScriptでリストアイテムを閉じる（非表示にする）方法を解説

    Webアプリケーション開発では、ToDoリストや通知一覧など、ユーザーの操作によってリスト項目を削除・非表示にしたいケースが数多くあります。本記事では、JavaScriptを使ってリストアイテムに「×」ボタンを実装し、クリックするとその項目を非表示にする方法を、動作するサンプルコード付きで詳しく解説します。 実装の仕組み この機能は、HTML・CSS・JavaScriptの3つを組み合わせて実現します。大まかな流れは以下のとおりです。 CSSで各リスト項目（<li>）の右端に「×」ボタンを絶対配置する querySelectorAll()でページ内のすべての閉じるボタン（.clo