How to remove tasks from localStorage?

To remove tasks from localStorage in your To-Do List application, you need to ensure that you update the stored tasks whenever a task is deleted. Here’s how to do it:

Step-by-Step Guide to Remove Tasks from localStorage

1. Identify the Task to Remove: When a user clicks the delete button for a task, you need to identify which task is being removed.

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

Updated JavaScript Code

Here’s how you can implement the removal of tasks from localStorage 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 = 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);
        removeTaskFromStorage(taskText); // Remove from localStorage
    });

    listItem.appendChild(deleteButton);
    taskList.appendChild(listItem);
    taskInput.value = ''; // Clear the input field

    saveTaskToStorage(taskText); // Save to localStorage
}

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 = document.createElement('li');
        listItem.textContent = task;

        // 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);
            removeTaskFromStorage(task); // Remove from localStorage
        });

        listItem.appendChild(deleteButton);
        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 Removal Process:

1. Delete Button Event Listener: When the delete button is clicked, it triggers the removeTaskFromStorage function, passing the task text as an argument.

2. Filtering Tasks: The removeTaskFromStorage function retrieves the current list of tasks from localStorage, filters out the task that needs to be removed, and updates the localStorage with the new array of tasks.

3. Updating localStorage: The updated array of tasks is then saved back to localStorage, ensuring that the removed task is no longer stored.

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 delete a task, it will be removed from both the displayed list and localStorage.

This ensures that your To-Do List application accurately reflects the current state of tasks in both the UI and the stored data!