How to make Jquery focus on only the current HTML "select" and remove only the current "option"

Question

I have this code, and I have it removing my first "option" because the first one says "Please Select:". Anyways, problem is, when I focus on my first "select" it removes the first "option" from EVERY select. How do I make it remove it from ONLY the currently focused one?

$(document).ready(function(){

  $('select').live('focus',function() {
   $('.firstoption').remove();
  });

});

http://stackoverflow.com/questions/3127429/javascript-this-keyword — Colleen, Dec 07 '12 at 00:07

Kevin Bowersox · Accepted Answer · 2012-12-07T00:11:41.190

0

$(document).ready(function(){

  $('select:first').on('focus',function() {
   $(this).children("option:first").remove();
  });

});

Example: http://jsfiddle.net/Ky6zq/2/

This will execute every time the select receives focus, so you will keep removing elements every time. To prevent this issue try:

$(document).ready(function(){

  $('select:first').one('focus',function() {
   $(this).children("option:first").remove();
  }); 
});

Example: http://jsfiddle.net/Ky6zq/1/

edited Dec 07 '12 at 00:11

answered Dec 07 '12 at 00:05

Kevin Bowersox

93,289
19
159
189

that's going to be the first select every time, not the current select. – Colleen Dec 07 '12 at 00:06
ah, very nice! I have a class on each first option, but with your code don't need that. ;) – user1881118 Dec 07 '12 at 00:25

score 0 · Answer 2 · answered Dec 07 '12 at 00:10

0

$(document).ready(function(){
   $(document).on('focus', 'select', function() {
       $('.firstoption', this).remove();
   });
});

You should be using the delegated version of on(), not live() which is deprecated.

Make sure you use a class for the first option, so as to not remove an option every time the select receives focus.

answered Dec 07 '12 at 00:10

adeneo

312,895
29
395
388

Could `one()` be used to prevent removing an option each time? – Kevin Bowersox Dec 07 '12 at 00:13
yeah I have ".firstoption" as the class on the first option actually. Wasn't just for demonstration :P Thank you!! – user1881118 Dec 07 '12 at 00:20
@kmb385 - Not when binding the event to the document or another non dynamic element like this. – adeneo Dec 07 '12 at 00:20

How to make Jquery focus on only the current HTML "select" and remove only the current "option"

2 Answers2