DIV 没有在删除 DOM 元素时显示，函数是否知道 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。我就是这样做的：

$(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/

DIV 没有在删除 DOM 元素时显示，函数是否知道 DOM 元素删除？

DIV isn't show up upon DOM element removing, does the function knows about the DOM element removal?

javascript

jquery

dom

jquery-confirm