为什么jQuery删除是在下拉列表中添加一个额外的元素？

Question

看到这个小提琴 ..

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');
    });
});

当我在谷歌浏览器（最新版本）中运行上述代码时，第一个元素被删除但它在底部附加了一个额外的元素。 为什么它表现得那样。

有任何想法吗？ 非常意外..

编辑：

这张照片适用于那些看不到任何错误的人。

Answer 1

看起来像Chrome中的渲染错误。 你实际上无法点击最后一个hey5而DOM实际上并没有创建第二个。 你可以通过mousedown解决这个问题：

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

jsFiddle例子

Answer 2

我很确定这是一个错误，另一个修复是使用focus事件：

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

小提琴： http ： //jsfiddle.net/F8E7L/