Estoy haciendo un página que simule un carrito de compras. Hasta ahora lo que llevo es una función que trae los elementos del localStorage y los coloca en un elemento HTML, además de una función que agrega la cantidad de elementos que hay en el localStorage a un span para mostrar cuantos productos hay en el carrito. El problema esta a la hora en que quiero eliminar los elementos que estan en el carrito, utilizo una función que emplee el método splice para eliminar los elementos del array y cargo el nuevo array al localStorage, sin embargo, solo me deja eliminar un producto y para poder eliminar otro tengo que recargar la página, lo mismo pasa con el span de los elementos del carrito, se actualiza hasta que recargo la página. Agradecería mucho su ayuda.
Cargar y mostrar los elementos del localStorage
const contenedor=document.querySelector("#hola")
const elementInCart=JSON.parse(localStorage.getItem("unidades-dentales"));
console.log(contenedor);
console.log(elementInCart);
const loadItems=()=>{
contenedor.innerHTML="";
elementInCart.forEach(elemento => {
const cartContainer=document.createElement("div");
cartContainer.classList.add("product_item");
console.log(elemento.image);
cartContainer.innerHTML=`
<div class="item_container">
<img src=${elemento.image} alt="">
<div class="item_title">
<h2>${elemento.name}</h2>
</div>
<div class="item_element">
<p>Cantidad</p>
<span>${elemento.quantity}</span>
</div>
<div class="item_element">
<p>Precio</p>
<span>${elemento.price}</span>
</div>
<svg class="delate-button" width="30" height="30" id="${elemento.id}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4zm2 2h6V4H9zM6.074 8l.857 12H17.07l.857-12zM10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1" fill="#0D0D0D"/></svg>
</div>
` ;
contenedor.append(cartContainer)
})
}
loadItems();
span elementos en carrito
const addCounter=()=>{
let newCounter=elementInCart.reduce((acc,unidad)=> acc + unidad.quantity,0);
counter.innerText=newCounter;
}
const counter=document.querySelector("#counter");
let counterInCart;
const elementInCartLs=JSON.parse(localStorage.getItem("unidades-dentales"));
console.log(elementInCartLs);
if(elementInCartLs){
counterInCart= elementInCartLs;
addCounter();
}else{
counterInCart=[];
}
eliminar y cargar productos al carrito
const delateItem=()=>{
const delateBtn=document.querySelectorAll(".delate-button");
console.log(delateBtn)
delateBtn.forEach(btn=>{
btn.addEventListener("click",quitItem);
})
}
const quitItem=(e)=>{
const btnId=e.currentTarget.id;
const itemDelated=elementInCart.findIndex(elemento=>elemento.id===btnId);
elementInCart.splice(itemDelated,1);
localStorage.setItem("unidades-dentales",JSON.stringify(elementInCart));
loadItems();
}
delateItem();