1

我有以下代码：

<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元素，如果它是最后一个元素，则从DIV#selected_conditions中删除。这就是我的做法：display: none#empty_msg

$(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_msgsince conditions.lengthstill =1。我已经在 Chrome 控制台中调试了代码，结果就是这样，我不知道为什么。

为什么？不知道元素已被删除的功能或 DOM？我该如何解决这种行为？

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

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

这是一个可以玩的小提琴。

4

1 回答 1

1

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

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

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

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

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

于 2016-11-11T16:24:15.530 回答