jQuery remove selected option from this

Question

first post here, I come in peace :) I've searched but can't quite find what I'm after.

I am trying to manipulate the selected option of a select box. Can someone please explain why this works:

$('#some_select_box').click(function() {
  $('#some_select_box option:selected').remove();
});

but this doesn't:

$('#some_select_box').click(function() {
  $('this option:selected').remove();
});

I just want to use "this" instead of spelling out the id of the select box - can someone point me in the right direction for the correct syntax? It's driving me mad because it looks like it should be really simple. And I'm sure it is to someone, but not me, cos its the end of the day and I'm brain-fried... Any pointers much appreciated.

Cheers

Mathieu · Accepted Answer · 2018-03-05T16:11:31.077

62

this isn't a css selector. you can avoid spelling the id of this by passing it as a context:

$('option:selected', this).remove();

http://api.jquery.com/jQuery/

edited Mar 05 '18 at 16:11

answered Mar 22 '10 at 17:08

Mathieu

5,495
2
31
48

That's great, thanks... Looks like there's much more jquery left to learn. Wasn't aware of that syntax. Many thanks :) – odavy Mar 23 '10 at 11:17

score 12 · Answer 2 · answered Mar 22 '10 at 17:08

12

 $('#some_select_box').click(function() {
     $(this).find('option:selected').remove();
 });

Using the find method.

answered Mar 22 '10 at 17:08

Vincent Ramdhanie

102,349
23
137
192

How to do it without jQuery, in pure javascript – Feb 16 '16 at 13:42

score 4 · Answer 3 · edited May 02 '23 at 09:23

4

This is a simpler one

$('#some_select_box').find('option:selected').remove();

edited May 02 '23 at 09:23

raveren

17,799
12
70
83

answered Jun 24 '14 at 11:54

Siddartha

49
1
1

score 4 · Answer 4 · answered Mar 22 '10 at 17:08

4

This should do the trick:

$('#some_select_box').click(function() {
  $('option:selected', this ).remove();
});

answered Mar 22 '10 at 17:08

MicE

5,038
2
29
26

score 0 · Answer 5 · answered Nov 27 '20 at 03:07

0

$('#some_select_box option:selected').remove();

answered Nov 27 '20 at 03:07

Andres Zambrano

23
1
10

score 0 · Answer 6 · answered Feb 24 '23 at 06:25

The above option works in create form, but the most accurate method is to remove only the disabled value, why?

think about it, when you want to use it in the edit form you need to remove only the disabled selected option otherwise it will remove all selected options from the multi-select dropdown.

remove disbaled value from dropdown

$('#some_select_box').find('option:disabled').remove().end();

above will remove option like below

<select id="some_select_box" multiple>
   <option disabled selected>Choose Option</option>
</select>

jQuery remove selected option from this

6 Answers6

Linked