0

I am building a kanban board with the functionality of saving tasks to the local storage. I can create, delete, drag and drop tasks and save all these updates to the local storage. However, when I reload the page and try to delete a task, it only gets removed from the DOM and not from the local storage.

  • Here is a demo of my project: Demo
  • Here is the link see the full code Full code

To reproduce the error, create a task and reload the page then try to delete it.

Here is my code for removing a task:


function renderTasks(list, parentId) {
  list.forEach((taskObj) => {
    const parentList = document.getElementById(parentId);
    const taskEl = CreateTask();
    const taskId = taskObj.id;
    const dropzoneEl = createDropZoneEl(taskId);
    taskEl.querySelector(".input-area").value = taskObj.content;
    parentList.lastElementChild.before(taskEl);
    taskEl.after(dropzoneEl);

    // check if taskObj already exists in list
    const index = list.findIndex((item) => item.id === taskObj.id);
    if (index !== -1) {
      // remove taskObj from list
      list.splice(index, 1);
    }
  });
}

function render() {
  renderTasks(listOne, "not-started");
  renderTasks(listTwo, "in-progress");
  renderTasks(listThree, "completed");
}

render()

function removeTask(id) {
  const taskId = id;
  const taskEl = document.getElementById(taskId);
  const dropzoneEl = document.getElementById(`dropzone-${taskId}`);
  taskEl.remove();
  dropzoneEl.remove();

  // Remove task from local storage
  listOne = listOne.filter((task) => task.id !== id);
  listTwo = listTwo.filter((task) => task.id !== id);
  listThree = listThree.filter((task) => task.id !== id);

  // save changes to local storage
  saveData("listOne", listOne);
  saveData("listTwo", listTwo);
  saveData("listThree", listThree);
}

How can I fix this error and make sure that the tasks are removed from both the DOM and the local storage after reloading the page?

I tried to change the logic of the remove function but nothing works

Hazem Hussein
  • 1
  • 1
  • did you try `localStorage.clear()` ? – hamaronooo Mar 14 '23 at 06:10
  • 1
    In this code I don't see where you are writing anything to local storage? – 54ka Mar 14 '23 at 06:16
  • @54ka he do has a method called saveData, where has used localStorage.setItem(key, JSON.stringify(data)); – huan feng Mar 14 '23 at 06:24
  • In the full code, there is no delete operation(localStorage.removeItem) on localStorage – huan feng Mar 14 '23 at 06:25
  • @hamaronooo Instead of deleting all the data in the local storage, I only want to remove the specific item that I have clicked the "remove" button for. – Hazem Hussein Mar 14 '23 at 08:01
  • @huanfeng I used the filter method to remove the specific element because it was easier to identify the element to delete. Initially, I didn't consider using the removeItem method because I was unsure about how to handle the data in the drag function, specifically how to change the position of elements in the array. This is why I thought the filter method would be a better option. – Hazem Hussein Mar 14 '23 at 08:08

0 Answers0