javascript - 为什么 jQuery remove 在下拉列表中添加了一个额外的元素？

Question

参见 this fiddle ..

HTML:

<select>
    <option>hey1</option>
    <option>hey2</option>
    <option>hey3</option>
    <option>hey4</option>
    <option>hey5</option>    
</select>

jQuery:

$(document).ready(function () {
    $('select').on('click',function(){
        $("option:first",this).remove();
        $(this).unbind('click');
    });
});

当我在 google Chrome(最新版本)中运行上面的代码时，第一个元素被删除，但它在底部附加了一个额外的元素。为什么会这样。

有什么想法吗？非常意外..

编辑:

这张照片是给那些看不出任何错误的人看的..

Answer 1

看起来像是 Chrome 中的渲染错误。您实际上不能单击最后一个 hey5 并且 DOM 实际上不会创建第二个。你可以通过 mousedown 解决这个问题:

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

jsFiddle example