Как реализовать корректно удаление товаров из корзины?

Question

[Pavel_20]

Приветствую!
Есть стандартная корзина:

Разметка списка товаров:

<ul class="basket__list">
    <li class="basket__item"></li>
    <li class="basket__item"></li>
    <li class="basket__item"></li>
    <li class="basket__item"></li>
</ul>

Не могу никак сделать, чтобы когда все товары удалены, выводился блок с надписью "Корзина пустая".
Получается, что когда последний товар удаляется, нижняя часть все равно остается (хоть в коде ниже я ее скрываю - .basket__box), да и блок с надписью корзина пустая (в коде ниже .basket__empty) не появляется, хоть я его показываю.


Использую jquery

$('.basket__item-delete').on('click', function(){
    
    let basketItem = $('.basket__item');
    
    while (basketItem.length != 0) {
        $(this).parent().fadeOut('slow');
        break;
    }

    if (basketItem.length == 0) {
        $('.basket__header, .basket__steps, .basket__box').fadeOut('slow');
        $('.basket__empty').fadeIn('slow');
    }
});

P.S. parent() работает правильно (кнопка удалить товар является прямым потомком .basket__item, да так как товары удаляются. Цикл for пробовал, тоже мимо

Comments

[Вадим]

а fadeOut удаляет элементы?
Что-то не вижу кода, который влиял бы на basketItem.length

[Pavel_20]

Вадим, да, удаляет. Проблема только в том, что при удалении последнего ничего не происходит

[Вадим]

Pavel_20, А может Вы всё же погуглите как работает fadeOut?

[Вадим]

Pavel_20, А как погуглите, проведите дебаг, и посмотрите что у Вас в переменной basketItem хранится в момент проверки условия basketItem.length == 0. Даже после реального удаление элементов из разметки.

[Pavel_20]

Вадим, не совсем понял что с fadeIn и fadeOut не так, но проблему решил:

let basketItems = [$('.basket__item')];

$('.basket__item-delete').on('click', function(){

    while (basketItems[0].length != 0) {
        basketItems[0].length = basketItems[0].length - 1;
        console.log(basketItems[0].length);
        $(this).parent().fadeOut('slow');
        break;
    }

    if (basketItems[0].length == 0) {
        $('.basket__header, .basket__steps, .basket__box').fadeOut('slow');
        $('.basket__empty').fadeIn('slow');
    }
});

[Сергей delphinpro]

Pavel_20, с fadeOut не так то, что это только скрывает элементы, но не убирает их.
т.е. если у вас там например форма, которая сабмитится по кнопке продолжить, то на сервак улетит полный список товаров.
Поэтому строку лучше удалить "по-настоящему"

const $el = $(this).parent();
$el.fadeOut('slow', function(){
  $el.remove();
});

[Вадим]

Pavel_20, Чтож ну поехали.
1) fedaOut не удаляет элементы из разметки. Он меняет им прозрачность до 0, а потом ставит display:none. HTML продолжает быть в DOM дереве.
2) Вы сохраняете все элементы корзины в переменную let basketItem = $('.basket__item');. В таком случае в переменную попадает массив. Вы проверяете его длину в расчёте на то, что когда элемент скроется, длина массива изменится. Но это так не работает. Даже если бы fadeOut действительно удалял элементы из разметки, то в переменной basketItem всё равно бы ничего не изменилось, так как вы уже сохранили это в памяти и между DOM деревом и переменной нет реактивной связи. Таким образом, длинна массива basketItem в Вашем начальном коде не меняется никогда.
2.1) Зачем Вам тут let - не ясно. Вы не задаёте этой переменной новое значение. Никогда. Соответственно, это const.
3) Вы при каждом нажатии на кнопку удалить ищите в DOM товары корзины - это не очень хорошо для производительности. Вынести в переменную вне обработчика клика - хорошо.
4) Зачем Вам while и breake я не могу понять. Если Вам нужно удалить всего 1 элемент, то зачем цикл?

[Pavel_20]

Вадим, спасибо за развернутый ответ! насчет while, я просто попробовал сделать, так как в подавляющем большинстве for используется и надоело. и почему 1 элемент? мне же нужно удалять товары до тех пор (while так и переводится) пока их количество не равно нулю. я не спорю, что мой вариант не самый лучший, но зато нашел сам решение