making to do application with JS but EventListener is not working after i press submit (still new to JS)

Question

I am trying to make To-do application with JS everything works fine but i can't delete after pressing submit and i don't understand why , if anyone can help me would be greatful

Here is a Code in code

your text

I Have checked the code but couldn't figure it out So please Help!

Answer 1

Well this might fix the code.

This is mostly the code posted in the pen.

let task = document.getElementsByClassName("taskName")[0];
let sub =  document.querySelector("#sub");
let ls = document.getElementsByClassName("ls")[0];
let dels = document.querySelectorAll(".submmit");
let tasks = [];

if (window.localStorage.task){

  tasks = JSON.parse(window.localStorage.task);

  ls.innerHTML = ``;
  for(let i = 0 ; i < tasks.length ; i++){
    let ele = document.createElement("div");
    let del = document.createElement("div");
    del.innerHTML = `Delete`;
    del.className = `submmit`
    ele.innerHTML = tasks[i];
    ele.className = 'task';
    ls.appendChild(ele)
    ls.appendChild(del)
    del.addEventListener("click",delEle); 
  }

}




sub.addEventListener("click",store) ; 

function store(){
  tasks.push(task.value)
  window.localStorage.setItem("task",JSON.stringify(tasks))
  let currTasks = JSON.parse(window.localStorage.task);

  ls.innerHTML = ``;

  for(let i = 0 ; i < currTasks.length ; i++){
    let ele = document.createElement("div");
    let del = document.createElement("div");
    del.innerHTML = `Delete`;
    del.className = `submmit`
    ele.innerHTML = currTasks[i];
    ele.className = 'task';
    ls.appendChild(ele)
    ls.appendChild(del)
    del.addEventListener("click",delEle); 
  }

}



function delEle(e){
  for(let i = 0 ; i < tasks.length ; i++){
    if(e.currentTarget.previousElementSibling.innerHTML === tasks[i]){
      
      tasks.splice(i, 1); 
      console.log(tasks)
      break;
    }
  }
  ls.removeChild(e.currentTarget.previousElementSibling)
  ls.removeChild(e.currentTarget)
  window.localStorage.setItem("task",JSON.stringify(tasks))
  
}

One simple thing you can do to improve the code is, you can remove the duplications.

Create a function to create To-Dos.