javascript - 删除 DOM 元素时不显示 DIV，该函数是否知道 DOM 元素删除？

Question

我有以下代码:

<ul class="ul" id="selected_conditions">
  <li class="condition" 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>

<div id="empty_msg" style="display: none">
  There is no conditions
</div>

一旦我点击小图标.delete_condition，我应该删除li元素，如果它是#selected_conditions的最后一个元素，则删除来自 #empty_msg DIV 的 display: none。我就是这样做的:

$(function() {
  $('#selected_conditions').on('click', '.delete_condition', function() {
    var condition = $(this).closest('.condition');
    var conditions = $('#selected_conditions li');

    $.confirm({
      title: 'Confirm!',
      icon: 'fa fa-warning',
      closeIcon: true,
      closeIconClass: 'fa fa-close',
      content: 'This will remove the whole condition! Are you sure?',
      buttons: {
        confirm: function() {
          condition.remove();

          if (conditions.length == 0) {
            $('#empty_msg').removeAttr('style');
          }
        }
      }
    });
  });
});

它删除了li，但没有显示#empty_msg，因为conditions.length仍然=1。我在 Chrome 控制台中调试了代码，这就是结果，但我不知道为什么。

为什么？不知道该元素被删除的函数或 DOM？我该如何解决此问题？

也许是我做错了什么，如果是这样的话，我找不到我把事情搞砸的地方。

我正在使用jQuery Confirm对于对话框。

这是一个Fiddle和玩。

Answer 1

您必须在删除项目后查询项目，但您是在删除项目之前执行此操作，因此它会在删除之前计算长度。

var conditions = $('#selected_conditions li');

您只需将您的条件更新为此即可获得预期结果。

if ( $('#selected_conditions li').length == 0) {
  $('#empty_msg').removeAttr('style');
}

这是工作更新的 fiddle 。 https://jsfiddle.net/8184ok2e/11/