jQuery select list removes all options

Question

I have a <select> list, which has been populated with several options, but want to remove those options to start again.

I am using jQuery and have tried the following:

$("#selectId").length = 0;

But this seems to have no effect.

Part of my problem is that I am using Firebug to debug the JavaScript, but the debugger does not break at the breakpoint, so I cannot see what is going on. Should it break when the JavaScript is within the <head> of my HTML file?

score 53 · Accepted Answer · answered Jul 09 '09 at 15:34

53

this would do:

$('#selectId').html('');

answered Jul 09 '09 at 15:34

David Hedlund

125,403
30
199
217

doesnt this removes the – therealprashant Aug 07 '17 at 09:58
1

@therealprashant: `.html` sets the *inner* html of an element, so setting it to an empty string will remove any child nodes, but spare the dropdown list itself. – David Hedlund Aug 11 '17 at 17:36

score 29 · Answer 2 · edited May 05 '21 at 17:06

29

This works too.

$("#selectId option").remove();

edited May 05 '21 at 17:06

Chuck D

1,572
2
15
30

answered Jul 09 '09 at 15:51

AKX

123,782
12
99
138

This seems like the neater solution – Rob Forrest Oct 26 '15 at 10:40
I like this better than the accepted answer because it is safer by removing the specific "option" tags. – Bryce Mar 30 '17 at 19:41

score 11 · Answer 3 · edited Apr 09 '12 at 07:23

11

$("#selectId").empty(); works for me.

The $("#selectId option").remove(); removed the select from the DOM.

Currently using jQuery JavaScript Library v1.7.1

edited Apr 09 '12 at 07:23

Dr. Rajesh Rolen

13,643
39
101
175

answered Apr 08 '12 at 19:19

John Forbes

145
3
8

score 7 · Answer 4 · edited May 23 '17 at 12:09

7

The fastest way to accomplish this:

$("#selectId").empty();

Here are some tests: http://jsperf.com/find-remove-vs-empty

I take no credit for these tests. See this stack overflow question: How do you remove all the options of a select box and then add one option and select it with jQuery?

edited May 23 '17 at 12:09

Community

1
1

answered Dec 08 '15 at 19:29

DR.

555
6
20

score 2 · Answer 5 · answered Jul 09 '09 at 16:45

2

$("#selectId").options.length = 0;

That won't actually work as written because it's using a jQuery selector. It'd work if you used a straight DOM getElementById on the select list, though. Either AKX's or d.'s responses will set you right.

answered Jul 09 '09 at 16:45

RwwL

3,243
1
22
24

score 1 · Answer 6 · answered Jul 09 '09 at 15:35

1

If without jquery:

javascript SELECT remove()

answered Jul 09 '09 at 15:35

lance

15,790
19
74
133

score 0 · Answer 7 · answered Oct 05 '18 at 20:11

0

Try This for Multiple Select Drop Down.

$('#FeatureId').multiselect("deselectAll", false).multiselect("refresh");

answered Oct 05 '18 at 20:11

Ahsan Aftab

151
2
6

jQuery select list removes all options

7 Answers7

Linked