How to remove all options from a dropdown using jQuery / JavaScript

Question

I have a dropdown as seen below:

<select id="models" onchange="removeElements()">
            <option id = "remove" value="0">R8</option>
            <option id = "remove" value="1">Quattro</option>
            <option id = "remove" value="2">A6 hatchback</option>
</select>

How would I create the script removeElements() that would remove all of the options within the select?

You understand that id section is meant to have a unique name, not as your option tags have. — gsamaras, Apr 10 '14 at 12:51
Repeated - http://stackoverflow.com/questions/3364493/how-do-i-clear-all-options-in-a-dropdown-box — Christian, Apr 10 '14 at 12:54
Plain JS: `document.getElementById('models').length = 0` does it for me. If you already have a reference to the select, then `select.length = 0` (see [HTML5 section 4.10.7](http://www.w3.org/html/wg/drafts/html/master/forms.html#dom-select-length)). — RobG, Apr 10 '14 at 13:20

Mir Gulam Sarwar · Accepted Answer · 2018-04-17T08:15:10.777

80

You didn't say on which event.Just use below on your event listener.Or in your page load

$('#models').empty()

Then to repopulate

$.getJSON('@Url.Action("YourAction","YourController")',function(data){
 var dropdown=$('#models');
dropdown.empty();  
$.each(data, function (index, item) {
    dropdown.append(
        $('<option>', {
            value: item.valueField,
            text: item.DisplayField
        }, '</option>'))
      }
     )});

edited Apr 17 '18 at 08:15

answered Apr 10 '14 at 12:51

Mir Gulam Sarwar

2,588
2
25
39

could I then repopulate the models select after running this method? – TotalNewbie Apr 10 '14 at 12:52
I need to empty the contents on change and repopulate the dropdown – TotalNewbie Apr 10 '14 at 12:52
no after I cleat the select box I aim to make an ajax call and then repopulate the dropdown – TotalNewbie Apr 10 '14 at 12:55
ok thankyou - I am having an issue even triggering the function onchange – TotalNewbie Apr 10 '14 at 13:02
what if you just wanted to remove a couple of options from the dropdown conditionally. For example a dropdown of times throughout the day, no times before current time are shown. – Akin Hwan Jan 09 '18 at 14:46
@AkinHwan why dont you do this from server side – Mir Gulam Sarwar Jan 09 '18 at 16:36

Milind Anantwar · Answer 2 · 2017-05-23T06:25:19.637

You can either use .remove() on option elements:

.remove() : Remove the set of matched elements from the DOM.

 $('#models option').remove(); or $('#models').remove('option');

or use .empty() on select:

.empty() : Remove all child nodes of the set of matched elements from the DOM.

 $('#models').empty();

however to repopulate deleted options, you need to store the option while deleting.

You can also achieve the same using show/hide:

$("#models option").hide();

and later on to show them:

$("#models option").show();

score 1 · Answer 3 · answered Feb 22 '19 at 11:50

1

Anyone using JavaScript (as opposed to JQuery), might like to try this solution, where 'models' is the ID of the select field containing the list :-

var DDlist = document.getElementById("models");
while(DDlist.length>0){DDlist.remove(0);}

answered Feb 22 '19 at 11:50

user3506285

86
3

score 0 · Answer 4 · answered Apr 10 '14 at 12:53

0

function removeElements(){
  $('#models').html('');
}

answered Apr 10 '14 at 12:53

Deepu--Java

3,742
3
19
30

score 0 · Answer 5 · answered Apr 10 '14 at 12:54

0

Try this

function removeElements(){
    $('#models').html("");
}

answered Apr 10 '14 at 12:54

Dhambha

82
1
8

score 0 · Answer 6 · answered Jun 30 '17 at 08:19

In case .empty() doesn't work for you, which is for me

function SetDropDownToEmpty() 
{           
$('#dropdown').find('option').remove().end().append('<option value="0"></option>');
$("#dropdown").trigger("liszt:updated");          
}

$(document).ready(
SetDropDownToEmpty() ;
)

Piotr · Answer 7 · 2019-12-25T23:42:26.477

0

Other approach for Vanilla JavaScript:

for(var o of document.querySelectorAll('#models > option')) {
  o.remove()
}

edited Dec 25 '19 at 23:42

answered Dec 25 '19 at 22:32

Piotr

1,777
17
24

How to remove all options from a dropdown using jQuery / JavaScript

7 Answers7