I am trying to build a simple to do application as a starter JS project and have pretty much got it working minus one problem I am stuck on!. When editing the saved task, the input which is created and inserted to edit the task doesn’t disappear once the edited task is saved. I though editInput.remove()
would remove the created element from the once the save button was clicked. Is my approach wrong? Any pointers or comments here would be greatly welcomed!
Here is the JS for code I currently have, current issue is with the remove()
const todoInput = document.querySelector(".todo--input");
const addBtn = document.querySelector(".todo--btn-add");
const list = document.querySelector(".todo--list");
window.onload = loadSavedTasks;
function taskFormat(task) {
const addedItem = document.createElement("li");
addedItem.className = "todo--listItem";
const addedText = document.createElement("p");
addedText.textContent = task;
addedText.className = "todo--text";
const btnContainer = document.createElement("div");
btnContainer.className = "button-container";
const editBtn = document.createElement("button");
editBtn.textContent = "Edit";
editBtn.className = "todo--btn-edit";
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "Delete";
deleteBtn.className = "todo--btn-delete";
//append to dom
list.appendChild(addedItem);
addedItem.appendChild(addedText);
addedItem.appendChild(btnContainer);
btnContainer.appendChild(editBtn);
btnContainer.appendChild(deleteBtn);
editBtn.addEventListener("click", () => {
const taskText = addedItem.querySelector(".todo--text");
const editInput = document.createElement("input");
editInput.type = "text";
editInput.value = taskText ? taskText.textContent : "";
if (taskText) {
taskText.replaceWith(editInput);
} else {
addedItem.appendChild(editInput);
}
editBtn.textContent = "Save";
editBtn.addEventListener("click", () => {
if (taskText) {
taskText.textContent = editInput.value;
editInput.replaceWith(taskText);
} else {
const addedText = document.createElement("p");
addedText.textContent = editInput.value;
addedText.className = "todo--text";
addedItem.insertBefore(addedText, btnContainer);
editInput.remove();
}
editBtn.textContent = "Edit";
saveTasksToLS();
});
});
deleteBtn.addEventListener("click", () => {
list.removeChild(addedItem);
saveTasksToLS();
});
return addedItem;
}
// load tasks
function loadSavedTasks() {
if (localStorage.getItem("todoTasks") === null) return;
let tasks = [...JSON.parse(localStorage.getItem("todoTasks"))];
tasks.forEach((task, i) => {
const taskListItem = taskFormat(task.task);
list.appendChild(taskListItem);
});
}
function addTask() {
const newTask = todoInput.value;
const taskListItem = taskFormat(newTask);
todoInput.value = "";
list.appendChild(taskListItem);
saveTasksToLS();
}
function saveTasksToLS() {
let tasks = [];
const taskElements = list.children;
for (let i = 0; i < taskElements.length; i++) {
console.log(taskElements[i].querySelector(".todo--text").textContent);
const taskText = taskElements[i].querySelector(".todo--text").textContent;
tasks.push({ task: taskText });
}
localStorage.setItem("todoTasks", JSON.stringify(tasks));
}
// EVENTLISTENERS
addBtn.addEventListener("click", addTask);