How to add delete functionality?

The delete functionality is already included in the previous examples, but I'll clarify how to implement it step-by-step in your To-Do List application. This functionality allows users to remove tasks from both the displayed list and localStorage.

Step-by-Step Guide to Implement Delete Functionality

1. Create a Delete Button: Each task will have a delete button that, when clicked, will remove the task from the list.

2. Remove the Task from the Displayed List: When the delete button is clicked, the corresponding task should be removed from the displayed list.

3. Update localStorage: After removing the task from the displayed list, you should also update localStorage to reflect this change.

Updated JavaScript Code

Here’s how to implement the delete functionality in your existing script.js file:

document.getElementById('addTaskButton').addEventListener('click', addTask);
document.addEventListener('DOMContentLoaded', loadTasks); // Load tasks on page load

function addTask() {
    const taskInput = document.getElementById('taskInput');
    const taskText = taskInput.value.trim();

    if (taskText === '') {
        alert('Please enter a task!');
        return;
    }

    const taskList = document.getElementById('taskList');
    const listItem = createTaskElement(taskText);
    taskList.appendChild(listItem);
    taskInput.value = ''; // Clear the input field

    saveTaskToStorage(taskText); // Save to localStorage
}

function createTaskElement(taskText) {
    const listItem = document.createElement('li');
    listItem.textContent = taskText;

    // Add a delete button to each task
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.style.marginLeft = '10px';
    deleteButton.addEventListener('click', function() {
        taskList.removeChild(listItem); // Remove from displayed list
        removeTaskFromStorage(taskText); // Remove from localStorage
    });

    listItem.appendChild(deleteButton);
    return listItem;
}

function saveTaskToStorage(task) {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.push(task);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    const taskList = document.getElementById('taskList');

    tasks.forEach(task => {
        const listItem = createTaskElement(task);
        taskList.appendChild(listItem);
    });
}

function removeTaskFromStorage(task) {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks = tasks.filter(t => t !== task); // Filter out the task to remove
    localStorage.setItem('tasks', JSON.stringify(tasks)); // Update localStorage
}

Explanation of the Delete Functionality:

1. Delete Button Creation: In the createTaskElement function, a delete button is created for each task. This button is appended to the list item.

2. Event Listener for Delete Button: The delete button has an event listener that performs two actions when clicked:

   • Remove from Displayed List: It removes the corresponding list item from the displayed task list using taskList.removeChild(listItem).
   • Remove from localStorage: It calls the removeTaskFromStorage function, passing the task text to remove it from localStorage.

3. Updating localStorage: The removeTaskFromStorage function retrieves the current list of tasks from localStorage, filters out the deleted task, and updates localStorage with the new array of tasks.

Running the Updated Application:

1. Save the updated script.js file.
2. Open index.html in a web browser.
3. You can now add tasks, and when you click the "Delete" button next to a task, it will be removed from both the displayed list and localStorage.

This implementation provides a complete delete functionality for your To-Do List application!