0

I am trying to create a to-do list application where you can delete and edit tasks. I am working out the delete tasks function. It is not working however. I tried doing a simple task such as logging to the console when the button is clicked, but it won't even respond to that. This seems only to be happening to the <li> elements rendered with JavaScript. Here is my html code So here is the code pen since in case anyone wants it https://codepen.io/KhumboMunsaka/pen/gOQQMMd

<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" />
    <script
      src="https://kit.fontawesome.com/9d829ab911.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <main>
      <h2>What would you like to do today?</h2>
      <form id="taskForm">
        <input
          type="text"
          name=""
          id=""
          class="task-input"
          placeholder="Walk the dog"
        />
        <input
          type="datetime"
          name=""
          id=""
          class="due-date"
          placeholder="Today at 12:00"
        />
        <button type="submit">Add Task</button>
      </form>
      <ul class="task-bar">
        <!-- <li class="task">
          <div class="details">
            <input type="checkbox" name="" id="" />
            <p>${taskDescription}</p>
          </div>
          <div class="buttons">
            <button><i class="fa-solid fa-pen-to-square edit"></i></button>
            <button class="delete">❌</button>
          </div>
        </li> -->
      </ul>
     
    </main>
    <script defer src="script.js"></script>
  </body>
</html>

Here is my JavaScript code

const form = document.getElementById('taskForm');
const taskInput = document.querySelector('.task-input');
const dueDateInput = document.querySelector('.due-date');
const taskBar = document.querySelector('.task-bar');
const editButton = document.querySelectorAll('.edit');
const editForm = document.getElementById('taskForm-edit');
const deleteTask = document.querySelectorAll('.delete');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // Prevent default form submission
  let taskDescription = taskInput.value;

  const task = ` 
      <li class="task">
          <div class="details">
            <input type="checkbox" name="" id="" />
            <p>${taskDescription}</p>
          </div>
          <div class="buttons">
            <button><i class="fa-solid fa-pen-to-square edit"></i></button>
            <button class="delete">❌</button>
          </div>
        </li>`;
  taskBar.insertAdjacentHTML('beforebegin', task);


});

deleteTask.forEach((task) => {
  task.addEventListener('click', (e) => {
    console.log('hi');
  });
});
});

Feel free to give any feedback on the

I tried using the for in loop but that did not work. I have tried simple actions to test if the event listener is actually being used.

KhumboMunsaka
  • 13
  • 3
  • The linked duplicate specifically used jQuery (it's a product of the time at which it was written), but contains answers which do not. – David Jul 28 '23 at 12:18
  • This might also help: https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation – Reyno Jul 28 '23 at 12:19

0 Answers0