При удалении последнего товара из корзины, остается пустой массив, хотя я его удаляю
Написал функцию , которая получает id продукта, который нужно удалить из корзины. Перебором массива let cart = JSON.parse(localStorage.getItem("products"));
я получаю элемент, содержащий нужный нам id. С помощью indexOf
Я узнаю порядковый номер этого продукта в нашем массиве cart
. С помощью cart.splice(serialNum, 1);
я удаляю нужный мне элемент. Запарился и сделал проверки, авось пустой массив останется или еще что. В общем, этот вот скрипт ищет нужный мне элемент, удаляет его и заново забрасывает массив в LS
function deleteFromCart (x){
/*Вносим наши данные в массив*/
let cart = JSON.parse(localStorage.getItem("products"));
/*Перебираем каждый элемент массива на наличие совпадений с id удаляемого товара*/
for(i=0;i<cart.length;i++){
/*Если такой id есть*/
if (cart[i].id == x){
/*Полностью выводим объект, чтоб по нему найти его порядковый номер в массиве*/
let ourX = cart[i];
/*Находим порядковый номер в массиве*/
let serialNum = cart.indexOf(ourX);
cart.splice(serialNum, 1);
}
}
/*Делаем проверку, если массив после удаления товаров пустой, то полностью чистим LS, чтоб корректно выводилась запись в корзину*/
if(cart==null){
localStorage.removeItem("products");
}else{
/*Пушим обратно уже отредактированный(без удаленного элемента) массив*/
localStorage.setItem("products",JSON.stringify(cart));
loadItemsToCart();
}
}
Затем я обновляю корзину в скрипте выше с помощью вызова этой функции:
function loadItemsToCart() {
/*Записываем массив товаров из нашего LS с товарами*/
let isProducts = JSON.parse(localStorage.getItem("products"));
/*Если в LS нет товаров*/
if(isProducts == null){
let targetPlace = document.querySelector('.prodFromCart');
targetPlace.innerHTML = "";
targetPlace.insertAdjacentHTML('afterBegin', '<a id="emptyBasket">Ваша корзина пустая(</a>');
}else{
/*Если длина массива товаров СТРОГО БОЛЬШЕ НУЛЯ*/
if(isProducts.length>0){
/*Для этого я обнуляю html в корзине, присваивая всему, что было в этом теге, пустую строку*/
document.querySelector('.prodFromCart').innerHTML = "";
/*Далее перебором массива товаров я заполняю корзину*/
for(let i=0; i<isProducts.length;i++){
let targetPlace = document.querySelector('.prodFromCart');
targetPlace.insertAdjacentHTML('afterBegin',
'<div id="cartForm'+isProducts[i].id+'" class="cart-form">'
+'<img class="cart-img" src='+isProducts[i].photo+'>'
+'<div class="this-info">'
+'<div class="this-pname"><a class="this-pname-text">'+isProducts[i].name+'</a></div>'
+'<div class="this-count-and-price"><a class="this-count-text" id="this-count'+isProducts[i].id+'">'+isProducts[i].count+' × '+'</a><a class="this-price-text">'+isProducts[i].price+' AED'+'</a></div>'
+'<div class="this-amount"><a class="this-amount-text">Amount:</a></div></div>'
+'<div class="delAndAmountBtn"><div class="deleteCart" id="'+isProducts[i].id+'" onclick="deleteFromCart(this.id)"><a class="deleteX">×</a></div><div class="amountBtns amountCartBtns"><button class="btnMinus" id="minus'+isProducts[i].id+'" onclick="delCountCart(this.id)">-</button><input class="amountInput" id="amount'+isProducts[i].id+'" type="number" value="'+isProducts[i].count+'" min="1" maxlength="4" size="4"><button class="btnPlus" id="plus'+isProducts[i].id+'" onclick="addCountCart(this.id)">+</button></div></div>'
+'<hr class="cartHR" color="#6A6A6A" size="1">'
+'</div>'
);
}
}
}
}
Но даже после всего проделанного мной, в LS остается пустой элемент, который портит мне жизнь. Где я мог ошибиться? Помогите пожалуйста. Уже 37 час сижу за компом и хочу добить сайт, но все как обычно идет не так как хотелось...