Remove Options from a Select List with JavaScript

Options can be removed from a select individually, as a selected group, or all at once. For a multiple-select, selectedOptions gives the options currently selected by the user.

const list = document.getElementById("itemList");
Array.from(list.selectedOptions).forEach((option) => option.remove());

Open remove-options demo →

Remove Selected Options Top ↑

function removeSelected(select) {
  Array.from(select.selectedOptions).forEach((option) => {
    option.remove();
  });
}

Remove All Options Top ↑

If the select should become completely empty, replaceChildren() removes all option nodes in one operation.

function removeAll(select) {
  select.replaceChildren();
}

If a placeholder must remain, remove only options after the placeholder or rebuild the desired list.

Restore Options from an Array Top ↑

const values = ["One", "Two", "Three", "Four", "Five", "Six"];
function restoreOptions(select) {
  select.replaceChildren();
  values.forEach((value) => select.add(new Option(value, value)));
}

Why Older Examples Loop Backwards Top ↑

The original page removed options by index from the end toward index 0. That pattern is valid when mutating a live options collection because deleting a lower index shifts later indexes. selectedOptions plus Array.from() is clearer for selected-item removal.

for (let i = select.options.length - 1; i >= 0; i--) {
  if (select.options[i].selected) {
    select.remove(i);
  }
}

Related Listbox Tutorials Top ↑

Add options · Move options · Listbox overview · JavaScript validation

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: