如何從 UI 和 localStorage 中刪除相同的項目

Question

當單擊刪除按鈕時，我試圖從 UI 和localStorage中刪除 ToDo 應用程序的一個項目。 當 e.target.calssName === 'delete' 時，我可以從 UI 中刪除該項目。 但是，我無法訪問localStorage中數組的索引，也無法從那里刪除相同的項目。 這是我正在處理的代碼。 任何幫助將不勝感激。

const addTask = document.querySelector('#addItem');
const inputForm = document.querySelector('#inputForm');
const saveButton = document.querySelector('#saveButton');
const output = document.querySelector('#output');

// Add task button
const addItem = () => {
    inputForm.style.display = 'block';
    taskInput.focus();
};

// Add and update item to localstorage
const checkStorage = () => {
    const input = document.querySelector('#taskInput');
    if(input.value) {
        const task = {
            name: input.value
        };
    
        if(localStorage.getItem('tasks') === null) {
            const tasks = [];
            tasks.push(task)
            localStorage.setItem('tasks', JSON.stringify(tasks));
        } else {
            const tasks = JSON.parse(localStorage.getItem('tasks'));
            tasks.push(task);
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }
    } else {
        return false;
    };
};

// Display item on UI
const displayItem = () => {
    const tasks = JSON.parse(localStorage.getItem('tasks'));
    if(tasks !== null) {
        const html = tasks.map((task, index) => {
            return `
            <ul class="item" id="${index}">
                <li>${task.name}</li>
                <button class="edit" id="${index}">Edit</button>
                <button class="delete" id="${index}">Delete</button>
            </ul>
            `
        }).join('');   
        output.innerHTML = html; 
    } else {
        checkStorage();
    };
};

// Save the task and display the item
const saveTask = (e)  => {
    e.preventDefault();
    checkStorage();
    displayItem();
    inputForm.reset();
    inputForm.style.display = 'none'
};

// Delete item from UI and localStorage
const deleteItem = (e) => {
    const tasks = JSON.parse(localStorage.getItem('tasks'));
    // Not sure how to loop throuh the tasks array and delete the item which is deleted from the UI
}

document.addEventListener('click', deleteItem);
document.addEventListener('onload', displayItem())
saveButton.addEventListener('click', saveTask);
addTask.addEventListener('click', addItem);

Answer 1

您可以使用Array#splice從數組中刪除元素。

const deleteItem = (e) => {
    if(e.target.classList.contains("delete")){
       const tasks = JSON.parse(localStorage.getItem('tasks'));
       tasks.splice(+(e.target.getAttribute("id")), 1);
       localStorage.setItem('tasks', JSON.stringify(tasks));
    }
}

Answer 2

許多不同的方法可以做到這一點。最好的方法是用戶filter 。 更多關於過濾器

var tasks = JSON.parse(localStorage.getItem('tasks')); tasks = tasks.filter(task=> "your condition"); localStorage.setItem('tasks', JSON.stringify(tasks));

注意：如果你有任務的 id，它應該像這樣 go。

任務 = tasks.filter(task=> task.id;= id);