Demo: Remove Options from a JavaScript Listbox

Select one or more items, then remove the selected items, clear the list, or restore all six values.

The original demo exposed the source for users to copy. The complete modern JavaScript and HTML used by this demo are kept below.

Complete JavaScript Used in This Demo Top ↑

<script>
const values = ["One", "Two", "Three", "Four", "Five", "Six"];
const itemList = document.getElementById("itemList");

function restoreOptions() {
  itemList.replaceChildren();
  values.forEach((value) => itemList.add(new Option(value, value)));
}

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

document.getElementById("removeSelected").addEventListener("click", removeSelected);
document.getElementById("removeAll").addEventListener("click", () => itemList.replaceChildren());
document.getElementById("restore").addEventListener("click", restoreOptions);
document.getElementById("closeWindow").addEventListener("click", () => window.close());
restoreOptions();
</script>

HTML Used in This Demo Top ↑

<select id="itemList" multiple size="6"></select>
<button id="removeSelected" type="button">Remove Selected</button>
<button id="removeAll" type="button">Remove All</button>
<button id="restore" type="button">Add All</button>
<button id="closeWindow" type="button">Close this window</button>

Removing options tutorial · Listbox · JavaScript

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: