javascript - 如何计算删除的元素，这样我就不会得到一个空的 ()？

Question

我有以下代码:

<ul class="ul" id="selected_conditions">
  <li data-field="asset_locations_name" data-condition="in">
    <i class="fa fa-minus-circle delete_condition" aria-hidden="true" title="Click to remove this condition from the list"></i> WHERE asset_locations_name IN(
    <span class="condition_item" data-id="1213381233">
    <i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1213381233
    </span>,
    <span class="condition_item" data-id="1212371897">
    <i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1212371897
    </span> )
  </li>
</ul>

每次单击小图标 .delete 时，我都应该删除当前值，我可以使用以下代码实现这一点:

$(function() {
  $('#selected_conditions').on('click', '.delete', function(ev) {
    var item_id = $(this).parent().data('id');
    $('.condition_item[data-id="'+ item_id +'"]').remove();
  });
});

但是上面的代码有一个问题:如果我删除所有项目，我将得到以下 () 空字符串，我不能这样:

• 如何计算括号 () 内的 SPAN 并在单击最后一个时发出警报？

Note: The right behavior would be show a confirm dialog to the user and if the user click on OK and agree to remove the last item then the whole condition should be removed. Meaning if I click on the last element the > whole parent li should be removed.

有什么帮助吗？我给你留了一个Fiddle和玩。这是一个 WIP，因此如果您有建议或更好的解决方案，请随时将其添加到您的答案中。

Answer 1

我已经升级了你的jsfiddle示例，请检查

$(function() {
    $('#selected_conditions').on('click', '.delete', function(ev) {
        var item = $(this).closest(".condition_item");
        var condition = $(this).closest(".condition");
        var items = condition.find(".condition_item");
        if(items.size() > 1) {
            item.remove();
        } else {
            if(confirm("Removing last item will remove whole condition. Continue?")) {
                condition.remove();
            }
        }
    });
});

https://jsfiddle.net/br3t/8184ok2e/8/