0

Не появляется сообщение "Список свойств пуст." после удаления всех свойств в списке, не могу понять причину, хотя написал вроде всё что нужно в коде:

$(".delete_1").click(function() {
  $(".list__item_1").remove()
});
$(".delete_2").click(function() {
  $(".list__item_2").remove()
});
$(".delete_3").click(function() {
  $(".list__item_3").remove()
});

if ($(".list__item").length == 0) {
  $(".list__without_item").css("display", "block");
} else if ($(".list__item").length > 0) {
  $(".list__without_item").css("display", "none");
};
.list__item {
  max-width: 250px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background: #f4f4f4;
  color: #000;
  margin-bottom: 3px;
}

.list__item_close {
  position: absolute;
  top: 0;
  left: 100%;
  width: 70px;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__favors">
  <p class="list__without_item">Список свойств пуст.</p>
  <div class="list__item list__item_1">
    <div class="list__item_close delete_1">Удалить</div>
    Свойство 1
  </div>
  <div class="list__item list__item_2">
    <div class="list__item_close delete_2">Удалить</div>
    Свойство 2
  </div>
  <div class="list__item list__item_3">
    <div class="list__item_close delete_3">Удалить</div>
    Свойство 3
  </div>
</div>

2
  • Uncaught SyntaxError: missing ) after argument list
    – Grundy
    14 янв 2019 в 9:02
  • Проверяйте $(".list__item").length === 0 в обработчике при удалении элемента списка. А так вы проверяете только один раз во время исполнения скрипта.
    – Doigrales
    14 янв 2019 в 9:14

3 ответа 3

2

Возможно в вашем коде всё иначе, чем в этом примере, но конкретно тут ваше условие висит непонятно где и выполняется не в тот момент, когда вы удаляете элементы, а до того, как сработают ваши обработчики. Будте благоразумны, напишите один обработчик для удаления, в нём тригерите свой собственный ченьж списка, на ченьж списка проверяйте условия, и если список пуст, то показывайте сообщение.

var $list = $('.list__favors');
$list.on('click', '.list__item_close', function() {
  $(this).parent().remove();
  $list.trigger('change');
});
$list.on('change', function() {
  var $message = $list.find('.list__without_item');
  if ($list.find('.list__item').length > 0) {
    $message.hide();
  } else {
    $message.show();
  }
});
.list__item {
  max-width: 250px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background: #f4f4f4;
  color: #000;
  margin-bottom: 3px;
}

.list__item_close {
  position: absolute;
  top: 0;
  left: 100%;
  width: 70px;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__favors">
  <p class="list__without_item">Список свойств пуст.</p>
  <div class="list__item list__item_1">
    <div class="list__item_close delete_1">Удалить</div>
    Свойство 1
  </div>
  <div class="list__item list__item_2">
    <div class="list__item_close delete_2">Удалить</div>
    Свойство 2
  </div>
  <div class="list__item list__item_3">
    <div class="list__item_close delete_3">Удалить</div>
    Свойство 3
  </div>
</div>

2

Немного улучшил код.

$('.delete').on('click', (e) => {
  $(e.target).parent().remove();
  isEmpty();
});

var isEmpty = () => {
  if ($('.list__favors .list__item').length === 0) {
    $('.list__without_item').css('display', 'block');
  } else {
    $('.list__without_item').css('display', 'none');
  }
};

isEmpty();
.list__item {
  max-width: 250px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background: #f4f4f4;
  color: #000;
  margin-bottom: 3px;
}

.list__item_close {
  position: absolute;
  top: 0;
  left: 100%;
  width: 70px;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__favors">
  <p class="list__without_item">Список свойств пуст.</p>
  <div class="list__item list__item_1">
    <div class="list__item_close delete">Удалить</div>
    Свойство 1
  </div>
  <div class="list__item list__item_2">
    <div class="list__item_close delete">Удалить</div>
    Свойство 2
  </div>
  <div class="list__item list__item_3">
    <div class="list__item_close delete">Удалить</div>
    Свойство 3
  </div>
</div>

1

let isEmpty = () => {
  if ($(".list__item").length == 0) {
    $(".list__without_item").css("display", "block");
  } else if ($(".list__item").length > 0) {
    $(".list__without_item").css("display", "none");
  };
}

isEmpty();

$(".delete_1").click(function() {
  $(".list__item_1").remove();
  isEmpty();
});
$(".delete_2").click(function() {
  $(".list__item_2").remove();
  isEmpty();
});
$(".delete_3").click(function() {
  $(".list__item_3").remove();
  isEmpty();
});
.list__item {
  max-width: 250px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background: #f4f4f4;
  color: #000;
  margin-bottom: 3px;
}

.list__item_close {
  position: absolute;
  top: 0;
  left: 100%;
  width: 70px;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__favors">
  <p class="list__without_item">Список свойств пуст.</p>
  <div class="list__item list__item_1">
    <div class="list__item_close delete_1">Удалить</div>
    Свойство 1
  </div>
  <div class="list__item list__item_2">
    <div class="list__item_close delete_2">Удалить</div>
    Свойство 2
  </div>
  <div class="list__item list__item_3">
    <div class="list__item_close delete_3">Удалить</div>
    Свойство 3
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.