JavaScript、jQuery、HTMLでセレクトボックスから項目を削除する方法

2024-04-04

JavaScript、jQuery、HTMLにおけるセレクトボックスから項目を削除する方法

HTMLのセレクトボックスから項目を削除するには、いくつかの方法があります。

方法

JavaScript

remove() メソッドを使用する:

const selectBox = document.getElementById('select-box');
const optionToRemove = selectBox.querySelector('option[value="value-to-remove"]');
optionToRemove.remove();

const selectBox = document.getElementById('select-box');
const optionToRemove = selectBox.options[selectBox.selectedIndex];
selectBox.removeChild(optionToRemove);

$('#select-box').find('option[value="value-to-remove"]').remove();

$('#select-box').find('option[value="value-to-remove"]').detach();

HTML

option 要素を直接削除する:

<select id="select-box">
  <option value="value-to-keep">Item to keep</option>
  <option value="value-to-remove">Item to remove</option>
</select>

注意点

削除する項目が選択されている場合、別の項目が選択されるようにする必要があります。
削除する項目がプログラムで使用されている場合、エラーが発生する可能性があります。

上記以外にも、ライブラリなどを利用して削除する方法もあります。

// remove() メソッドを使用する

const selectBox = document.getElementById('select-box');
const optionToRemove = selectBox.querySelector('option[value="value-to-remove"]');
optionToRemove.remove();

// removeChild() メソッドを使用する

const selectBox = document.getElementById('select-box');
const optionToRemove = selectBox.options[selectBox.selectedIndex];
selectBox.removeChild(optionToRemove);

// remove() メソッドを使用する

$('#select-box').find('option[value="value-to-remove"]').remove();

// detach() メソッドを使用する

$('#select-box').find('option[value="value-to-remove"]').detach();

// option 要素を直接削除する

<select id="select-box">
  <option value="value-to-keep">Item to keep</option>
  </select>

実行方法

上記のコードをHTMLファイルに保存し、ブラウザで開きます。

結果

JavaScript:
- remove() メソッドを使用した場合、選択された項目が削除されます。
jQuery:
- detach() メソッドを使用した場合、選択された項目が DOM から削除されますが、メモリからは削除されません。
HTML:

セレクトボックスから項目を削除するその他の方法

selectedIndex プロパティを使用する

const selectBox = document.getElementById('select-box');
selectBox.selectedIndex = -1; // すべての項目を非選択状態にする

options プロパティを使用する

const selectBox = document.getElementById('select-box');
selectBox.options.length = 0; // すべての項目を削除する

for ループを使用する

const selectBox = document.getElementById('select-box');
for (let i = selectBox.options.length - 1; i >= 0; i--) {
  selectBox.removeChild(selectBox.options[i]);
}

これらのライブラリを使用すると、より簡単にセレクトボックスから項目を削除することができます。

注意事項