Estoy tratando de implementar una función en la que un elemento se eliminará del almacenamiento local cuando un usuario haga clic en un botón. El elemento es parte de una matriz almacenada en el almacenamiento local. Sin embargo, no puedo aquí es cómo se guarda el artículo
const favBtns=meal.querySelectorAll(".fav-btn i") const images = document.querySelectorAll('.meal-header > img') favBtns.forEach((favBtn,i)=>{ favBtn.addEventListener("click", ()=>{ favBtn.classList.toggle("active") console.log(images[i].src, images[i].alt) myFavMeals.push({src: images[i].src, alt: images[i].alt}) localStorage.setItem("myFavMeals", JSON.stringify(myFavMeals)) showMeal }) })así es como estoy tratando de eliminar el elemento
function clearfav(){ const clears=document.querySelectorAll("i#clear.fa.fa-window-close") clears.forEach(clear=>{ clear.addEventListener("click",()=>{ let favmeals= JSON.parse(localStorage.getItem("myFavMeals")) favmeals.forEach((favmeals,i)=>{ favmeals.splice(favmeals[i],1) showMeal() }) }) }) }favmeals es su matriz analizada y también favmeals es un elemento de matriz dentro de forEach . Renombrar uno de ellos. // With [1][2] function clearfav() { const clears = document.querySelectorAll("i#clear.fa.fa-window-close") clears.forEach(clear => { clear.addEventListener("click", () => { let favmeals = JSON.parse(localStorage.getItem("myFavMeals")) favmeals.forEach((favmeal, i) => { favmeals.splice(favmeals[i], 1) showMeal() }) localStorage.setItem("myFavMeals", JSON.stringify(favmeals)) }) }) }forEach dentro del controlador de eventos "click" en absoluto, porque ahora intenta eliminar cada elemento. Por ejemplo, si desea eliminar solo el elemento con el mismo índice con el icono en el que hizo clic: // With [1][2][3] function clearfav() { const clears = document.querySelectorAll("i.fa.fa-window-close") clears.forEach((clear, index) => { clear.addEventListener("click", () => { let favmeals = JSON.parse(localStorage.getItem("myFavMeals")) favmeals.splice(index, 1) localStorage.setItem("myFavMeals", JSON.stringify(favmeals)) }) }) } También debe tenerse en cuenta: i#clear.fa.fa-window-close es una consulta incorrecta, porque significa que tiene varios elementos con la misma identificación. id debe ser único , use clases en su lugar.