I'm currently working on a To-Do List and facing an issue while trying to delete an item upon clicking a trash bin icon.
The problem I'm encountering is that only one data point is removed from local storage when the icon is clicked. If I attempt to remove another 'li' tag, I have to refresh the page before it can be deleted.
My goal is to seamlessly remove both items and related data without the need for a page refresh. Any insights into what might be causing this issue would be greatly appreciated.
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();
});