Ваша проблема заключается в том, что вы собираете элементы с помощью `querySelectorAll` только один раз, и после удаления элемента из DOM список `deleteItemBtn` больше не соответствует текущему состоянию DOM. После удаления элемента вам нужно заново получать элементы и добавлять слушатели событий.
Вот как можно переписать ваш код, чтобы он работал правильно с обновленным списком элементов:
```javascript
const showCartButton = document.querySelector('.show-cart');
// Функция для обновления обработчиков событий
function updateDeleteButtons() {
const deleteItemBtns = document.querySelectorAll('.delete-item');
deleteItemBtns.forEach(item => {
// Снимаем старые обработчики, если они были добавлены ранее
item.replaceWith(item.cloneNode(true)); // Создает новый элемент с теми же свойствами (в т.ч. data атрибутами)
item.addEventListener('click', () => {
const name = item.dataset.name;
shoppingCart.removeItemFromCartAll(name);
displayCart();
updateDeleteButtons(); // Обновляем обработчики после изменения корзины
});
});
}
// Инициализация обработчиков событий при загрузке страницы
updateDeleteButtons();
// Кроме того, вы также можете добавить обработчик на кнопки показа корзины,
// если они динамически создаются (например, открытие корзины)
showCartButton.addEventListener('click', displayCart);
```
В этом коде мы создали функцию `updateDeleteButtons`, которая находит все текущие элементы с классом `delete-item` и устанавливает для них слушатели событий. После вызова `removeItemFromCartAll`, мы снова вызываем `updateDeleteButtons`, чтобы обновить слушатели событий для оставшихся элементов.
Кроме того, `item.replaceWith(item.cloneNode(true))` позволяет удалить старый обработчик событий на старом элементе, при этом сохраняя все необходимые атрибуты (включая `data-name`), и добавляя новый обработчик на новый элемент.
Этот подход позволяет вам динамически обновлять обработчики событий для элементов в корзине при каждом изменении.