Delete specific range of elements JQuery

Question

Html:

<select id ="combooptions">
          <option id="combostart" value=""></option>
 </select>

js:

var str = "";
if (combonews.length > 0)
        for (var i in combonews) {
            str += "<option value='" + combonews[i][0] + "'>" + combonews[i][1] + "</option>";
        }
    jQuery("#combooptions").append(str);

It works fine, but now I want to remove those appended one, leaving the initial 1 option tag, as shown above. I tried:

jQuery("#combooptions").html('');
 //or
jQuery("#combooptions").append('');
//or
jQuery("#combostart").append('');
//or
jQuery("#combostart").html('');

but no success.

Please help thank You

score 3 · Answer 1 · answered Mar 08 '13 at 15:11

To shrink a select list, you can also lower the number of options:

document.getElementById("combooptions").length = 1;

With jQuery:

$("#combooptions")[0].length = 1;

More generic idea to remove "all but the first":

$("#combooptions :not(:first-child)").remove();

Example: http://jsfiddle.net/kVRpy/

score 3 · Accepted Answer · edited May 23 '17 at 10:25

3

Since you gave the first option a unique ID, just do:

$('#combostart ~ option').remove();

What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

edited May 23 '17 at 10:25

Community

1
1

answered Mar 08 '13 at 15:12

Blazemonger

90,923
26
142
180

Thank you guys,all those were working, but since you were the first I chose yours @Blazemonger as an answer. Appreciate – InGeek Mar 08 '13 at 15:22

score 1 · Answer 3 · answered Mar 08 '13 at 15:12

1

You could select all options and then remove the one with id combostart from your selection. Then call .remove() to remove the unwanted options.

$('#combooptions option').not('#combostart').remove();

answered Mar 08 '13 at 15:12

Mark Walters

12,060
6
33
48

score 0 · Answer 4 · answered Mar 08 '13 at 15:17

0

Try this:

$('#combooptions').html("<option id='combostart' value=''></option>");

answered Mar 08 '13 at 15:17

Matus

410
5
15

Delete specific range of elements JQuery

4 Answers4