How do I clear all options in a dropdown box?

Direct property manipulation

The above code snippet revolves around directly manipulating the length property of the dropdown's options:

document.getElementById('mySelect').options.length = 0;


By setting options.length to 0, we're effectively telling the dropdown, "You? Memories of options? Nope, none at all!" It's really as simple as that.

Clearing dropdown with innerHTML

Another simple and browser-friendly method is setting the innerHTML of the dropdown to an empty string:

document.getElementById('mySelect').innerHTML = '';


This trick essentially "resets" the dropdown, leaving it as blank as a sheet of paper.

Removal in reverse order

If you prefer to remove the <option> elements one by one, starting from the end is the best strategy:

const selectDropDown = document.getElementById('mySelect');
for(let i = selectDropDown.options.length - 1; i >= 0; i--) {
  selectDropDown.options[i].remove();
}


Going backwards ensures no surprises from changing option indices. Plus, it's always fun going against the flow, isn't it?

A JavaScript function for all seasons

Encapsulating the dropdown clearing logic into a stand-alone function lets you re-use it across your entire project. Think of it as your very own clean-up crew:

function clearDropdown(selector) {
  const dropdown = document.querySelector(selector);
  dropdown.options.length = 0; // Crew to dropdown: "Time for a reset, buddy!"
}


And for our jQuery fans: empty()

Boss-level efficiency can be achieved with jQuery's empty() method, waiting to be unleashed in a neat, single line:

$("#mySelect").empty(); // Dropdown: "Wait, what just happ...?!"


With empty(), jQuery handles the dirty DOM work for you. All you need to do is sit back and marvel.

Caveats and gotchas

Storing value pre-clearance

You might want to stash the selected value elsewhere before proceeding to clear the dropdown, especially for cases where you'd need the data later. A little foresight never hurt anyone:

const storedValue = dropdown.value;
clearDropdown('#mySelect');
// perhaps a tad later, restore storedValue if need be


The not-so-great options = null

If you are feeling adventurous and considering setting options to null — don't. Results vary across browsers, and not in a good way:

// AVOID this. Trust me.
dropdown.options = null; // Dropdown: "A juggler I am not!"


Dynamic data implications

Got dynamic data populating your dropdowns? Ensure they are cleared of any remnants before stuffing them with fresh options:

clearDropdown('#mySelect'); // Lay it clean before the feast
// then, bring forth the new options
