title: Remove item from Local Storage
body: <p>I'm trying to remove an item from local storage. It works except it occasionally removes more than one item. </p>
  
  <p>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. </p>
  
  <pre><code>    let itemsArray = JSON.parse(localStorage.getItem("itemsArray")) || [];
  
      //Initialize Function
      window.addEventListener("load", () =&gt; 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 &lt; store.length; i++){
          store.splice(i, 1);
          localStorage.setItem('itemsArray', JSON.stringify(store));
        }
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>This is essentially the Brad Traversy project on DOM manipulation. I am trying to work more with local storage for other projects. </p>