У меня есть следующий фрагмент кода:DIV не отображается при удалении элемента DOM, знает ли функция о удалении элемента DOM?
<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
затем удалить display: none
из #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, чтобы играть с.