javascript NodeList Selector

I would like to say thank you in advance for all the help that will be provided so here is my problem.

I'm trying to make a simple to-do app I'm at the step where I want to be able to delete some items from the list array (every new list item is pushed inside an array) so I add a button to each task to delete the task then I do a querySelectorAll to get all the button then I loop through each button and add an event listeners to run the specific function but it doesn't work I tried the forEach loop the Array. from method move my script tag to the bottom of the file and also to move my querySelectorAll even further below to make sure it catches all the button but nothing seem to work if you guys have any pointer i would appreciate it here is my code

github gist enter link description here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>TODO App</title>
  </head>
  <body>
    <div class="container">
      <header class="header"><h1 class="header-title">To-Do List</h1></header>
      <nav class="navbar"></nav>
      <main class="main">
        <label for="task">Add a task: </label>
        <input class="taskTextInput" type="text" placeholder="add a task" />
        <button class="addTaskBtn" type="button">Add</button>
        <button class="clearTaskBtn" type="button">Clear</button>
        <hr />
        <div class="taskContainer"></div>
      </main>
      <footer class="footer"></footer>
      <script src="./script.js" defer></script>
    </div>
  </body>
</html>

"use strict";
const taskList = [];
const addTaskBtn = document.querySelector(".addTaskBtn");
const taskTextInput = document.querySelector(".taskTextInput");
const taskContainer = document.querySelector(".taskContainer");
let deleteTaskBtn = document.querySelectorAll(".deleteTaskBtn");

function addTask(e) {
  e.preventDefault();
  if (taskTextInput.value == "") return;
  taskContainer.innerHTML = "";
  taskList.push(taskTextInput.value);
  taskTextInput.value = "";
  displayTask();
  return (deleteTaskBtn = document.querySelectorAll(".deleteTaskBtn"));
}
addTaskBtn.addEventListener("click", addTask);

function displayTask() {
  for (const task in taskList) {
    const listItem = `
    <div class="task-container">
        <li class="task-item">${taskList[task]}</li>
        <div class="task-button">
            <input class="toggleTaskBtn" type="checkbox"/>
            <img src="./image/delete.png" class="deleteTaskBtn icon"></img>
        </div>
    </div>`;
    taskContainer.insertAdjacentHTML("afterbegin", listItem);
  }
}
function deleteTask() {
  console.log("hello");
}
//
deleteTaskBtn.forEach((btn) => {
  btn.addEventListener("click", deleteTask);
});
//
const toggleTaskBtn = document.querySelectorAll(".toggleTaskBtn");
function toggleTask() {}

/*
1. Add a new item to a array
2. display the array on the page
3. add a checkbox when click add a line over the text and move it to the button if unclick remove the line and move it back in the top
4. add a clear button to clear of completed item
*/

Solution

In this part of the code, you assign event handlers to buttons that don't exist yet:

deleteTaskBtn.forEach((btn) => {
  btn.addEventListener("click", deleteTask);
});

You create these buttons each time only inside displayTask function. However, you can intercept all child click events in the parent element and perform all checks there. This example may be able to help you:

taskContainer.addEventListener('click', (e) => {
  if (e.target.matches('.deleteTaskBtn')) {
    console.log('Clicked delete Task Button !!!');
  }
})