Javascript 从仍显示在数组中的可排序列表中删除的项

我有两个可排序的列表和一个按钮。用户将第一个列表中的项目添加到第二个列表中，然后当他们单击按钮时，我有一些脚本从第二个列表中收集列表项目id。此部分按预期工作

我的问题是，当用户意外地将一个项目添加到他们想要删除的第二个列表中时。我有一个垃圾桶图标，可以从列表中删除该项，但是当您点击按钮获取数组时，它仍然在数组中包含已删除的列表项。我如何避免这种情况？我应该在添加和删除项时构建数组，还是像我在这里所做的那样，在完成移动列表项之后只构建一次数组

谢谢你看

---

删除时您正在隐藏

li

。但当您创建数组时，您将获取所有

li

元素

只需选择可见元素

$（“#所选li:visible”）。

阅读

    <div class="avail_segments_wrap">
    <ul id="available" class="segments_available">Available Segments
        <li id="1"><span class="title">Item 1</span><a href="#" class="ui-icon ui-icon-add"></a></li>
        <li id="2"><span class="title">Item 2</span><a href="#" class="ui-icon ui-icon-add"></a></li>
        <li id="3"><span class="title">Item 3</span><a href="#" class="ui-icon ui-icon-add"></a></li>
        <li id="4"><span class="title">Item 4</span><a href="#" class="ui-icon ui-icon-add"></a></li>
        <li id="5"><span class="title">Item 5</span><a href="#" class="ui-icon ui-icon-add"></a></li>
        <li id="6"><span class="title">Item 6</span><a href="#" class="ui-icon ui-icon-add"></a></li>
    </ul>
</div>

<br>

<div class="chosen_segments_wrap">
    <ul id="chosen" class="segments_chosen">Chosen Segments
    </ul>
</div>

<button type="button" id="button1">Button1</button>

//make lists sortable
$("#available").sortable({
    connectWith: "#chosen"
});
$("#chosen").sortable({
    connectWith: "#available"
});

//make add and trash icons functional
$('.ui-icon-add, .ui-icon-delete').on('click', function() {
    item = $(this).parent();
    item.fadeOut(function() {
        if (item.parent().attr('id') == 'chosen') {
            $('#available').remove(item.fadeIn());

        } else {
            $('#chosen').append(item.fadeIn());
        }
    });
});

//hit button to collect all li id's from ul "chosen".
$("#button1").click( function()
           {
             var chosenArray = [];
                $('#chosen li').each(function(){
                chosenArray.push($(this).attr('id'));
                    });
               alert(chosenArray)
           }
        );

$("#button1").click(function () {
    var chosenArray = [];
    $('#chosen li:visible').each(function () {