Remove item from Local Storage

Question

I'm trying to remove an item from local storage. It works except it occasionally removes more than one item.

I have tried array.splice removing local storage then resetting it with the new values and haven't found a way to fix it, I'm sure it's something simple.

    let itemsArray = JSON.parse(localStorage.getItem("itemsArray")) || [];

    //Initialize Function
    window.addEventListener("load", () => showItems(itemsArray));

    //Add event listener for the form submit
    myForm.addEventListener("submit", onSubmit);

    //Add event listener for the click event on the delete button
    itemList.addEventListener("click", removeItem);

    function showItems(itemsArray) {
        itemList.innerHTML = itemsArray.join("");
    }

    //Place the input into to list of items
    function onSubmit(e) {
      //Prevent the form submission
      e.preventDefault();

        //Create li element for the DOM
        li = document.createElement("li");

        //Place input value into li
        li.appendChild(document.createTextNode(`${item.value}`));

        //Create the delete button and place it to the right of input value
        const btnDelete = document.createElement("button");
        btnDelete.classList.add("btnDelete");
        btnDelete.appendChild(document.createTextNode("X"));
        li.appendChild(btnDelete);
        itemList.appendChild(li);
        itemsArray.push(li.outerHTML);
        localStorage.setItem("itemsArray", JSON.stringify(itemsArray));

        //Reset input value to empty
        item.value = "";
    }

    //Delete item
    function removeItem(e) {
      if (e.target.classList.contains("btnDelete")) {
        if (confirm("Are You Sure You Want To Delete This Item?")) {
          removeLocalStorage();
          let li = e.target.parentElement;
          itemList.removeChild(li);
        }
      }
    }

    function removeLocalStorage(){
      let store = JSON.parse(localStorage.getItem("itemsArray")) || [];
      for(let i = 0; i < store.length; i++){
        store.splice(i, 1);
        localStorage.setItem('itemsArray', JSON.stringify(store));
      }
    }

All I want is to remove the item that corresponds to the item being deleted from the UI. When I delete, say index 1, it removes every other index.

This is essentially the Brad Traversy project on DOM manipulation. I am trying to work more with local storage for other projects.

Answer 1

You need to pass the index of the item you want deleted to the removeLocalStorage function. See code below:

//Delete item
function removeItem(e) {
  if (e.target.classList.contains("btnDelete")) {
    if (confirm("Are You Sure You Want To Delete This Item?")) {
      let li = e.target.parentElement;
      let index = Array.prototype.indexOf.call(itemList.children, li);
      removeLocalStorage(index);
      itemList.removeChild(li);
    }
  }
}

function removeLocalStorage(index){
  let store = JSON.parse(localStorage.getItem("itemsArray")) || [];
  store.splice(index, 1);
  localStorage.setItem('itemsArray', JSON.stringify(store));
}