JavaScript - 23

swstack < 1 min read

JavaScript - 23: To-Do List with Delete Buttons

Improve the to-do list: Allow users to delete individual tasks by clicking a "Delete" button next to each item.

✦ JavaScript Editor

▶ Live Output

👀 Show Solution

const taskInput = document.getElementById("taskInput");
const addBtn = document.getElementById("addBtn");
const todoList = document.getElementById("todoList");

addBtn.addEventListener("click", function() {
  if (taskInput.value.trim() === "") return;

  const li = document.createElement("li");
  li.innerHTML = \`
    \${taskInput.value}
    
  \`;
  
  todoList.appendChild(li);
  taskInput.value = "";
  
  li.querySelector(".delete-btn").addEventListener("click", function() {
    li.remove();
  });
});