為什么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/