Problem in Chrome browser when deleting selection option using jQuery

Question

I have the following HTML:

<select> <option value="0">Remove Me</option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> <option value="4">Test 4</option> <option value="5">Test 5</option> </select> 

And I want, when the user clicks on select, the option with the value '0' should be removed. This is a jQuery script I use:

 $('select').on('click',function(){ $(this).find('option[value="0"]').remove(); }); 

This works in Firefox and IE (10,9,8), but in Chrome, when the option is removed, the latter is duplicated as follows:

If I click on the selection again when it expands, the duplicated parameter will disappear. Why does this not work in the first place, as in FireFox?

This is uncertainty about my problem - http://jsfiddle.net/FN5jL/1/

Answer 1

As a workaround:

Demo

 $('select').one('focus',function(){ $(this).find('option[value="0"]').remove(); }); 

I don’t know where this strange behavior comes from ...