Remove item and its data from localStorage when I click an icon

I'm making a To-Do List and trying to remove an item when I click a trash bin icon

image

not only the item but also its data from local storage.

However, when I click the icon, only one data is removed.

If I remove another 'li' tag, I have to refresh my page and then click it.

I want to remove items and data, do not refresh it

What is the problem with my page?

Thank you.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TO DO LIST</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
      integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q"
      crossorigin="anonymous"
    />
    <script src="main.js" defer></script>
    <!-- <script src="data_storage.js" defer></script> -->
  </head>
  <body>
    <section class="container">
      <h1>TO DO LIST</h1>
      <ul></ul>
      <div class="footer">
        <input type="text" placeholder="Title..." />
        <button class="enter">Enter</button>
      </div>
    </section>
  </body>
</html>

CSS

* {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background-color: #ecf0f1;
}

.container {
  width: 50%;
  height: 100%;
  margin: auto;
  border: 1px solid green;
  border-radius: 15px 15px 0 0;
}

h1 {
  margin: 10px 20px;
  padding-bottom: 15px;
  text-align: center;
  font-size: 42px;
  color: #98e3a1;
  border-bottom: 1px dotted #5e7361;
}

ul {
  font-size: 24px;
  padding-bottom: 10px;
  list-style-type: none;
}

li {
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 3px;
  margin-right: 20px;
  border-bottom: 1px solid grey;
}

.footer {
  display: block;
  position: relative;
}

input {
  position: relative;
  width: 93%;
  padding: 10px 0;
  border: none;
  outline: none;
}

.enter {
  position: absolute;
  padding: 0;
  width: 7%;
  height: 100%;
  outline: none;
  background-color: greenyellow;
  border: none;
  color: grey;
}

.fas {
  font-size: 20px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  transition: transform 200ms ease-in;
}

.fas:hover {
  color: red;
  transform: scale(1.1);
}

JavaScript

const ul = document.querySelector("ul");
const input = document.querySelector("input");
const enterBtn = document.querySelector(".enter");

const LIST_LS = "lists";

function filterFn(toDo) {
  return toDo.id === 1;
}

let lists = [];

function saveStorage() {
  localStorage.setItem(LIST_LS, JSON.stringify(lists));
}

function deleteStorage(event) {
  const trashBtn = event.target;
  const li = trashBtn.parentNode;
  ul.removeChild(li);
  const cleanStorage = lists.filter((toDo) => {
    return toDo.id !== parseInt(li.id);
  });
  lists = cleanStorage;
  saveStorage();
}

function loadStorage() {
  const loadStorage = localStorage.getItem(LIST_LS);
  if (loadStorage !== null) {
    const parsedList = JSON.parse(loadStorage);
    parsedList.forEach((list) => {
      createItem(list.text);
    });
  }
}

function onAdd() {
  const text = input.value;
  if (text === "") {
    input.focus();
    return;
  }
  createItem(text);
  input.value = "";
  input.focus();
}

function createItem(text) {
  const itemRow = document.createElement("li");
  const newId = lists.length + 1;
  itemRow.setAttribute("class", "item__row");
  itemRow.innerHTML = `${text} <i class="fas fa-trash-alt" data-id=${itemRow.id}></i>`;

  ul.appendChild(itemRow);
  itemRow.id = newId;
  const delBtn = document.querySelector(".fa-trash-alt");
  delBtn.addEventListener("click", deleteStorage);

  const listObj = {
    text: text,
    id: newId,
  };

  lists.push(listObj);
  saveStorage();

  return itemRow;
}

loadStorage();

enterBtn.addEventListener("click", () => {
  onAdd();
});

input.addEventListener("keypress", (event) => {
  if (event.key === "Enter") onAdd();
});