时间戳

首页 > 解决方案 > 按 ID 从表和 localStorage 中清除数据。使用按钮

javascript - 按 ID 从表和 localStorage 中清除数据。使用按钮

问题描述

我需要建议。我有一个表，我在其中存储项目，这些项目存储在 localStorage 中，然后插入到表中。我需要在列表中设置删除按钮。为了让它工作，当我点击它时，给定的行将从 localStorage 和表中删除。

let form = document.querySelector("#form-list")


if(localStorage.getItem("task") == null){
    var taskArray = []
} else {
    taskArray = JSON.parse(localStorage.getItem("task"))
}

form.addEventListener("submit", function(event){
    // event.preventDefault()
    
    taskArray.push({
        id: uuidv4(),
        job: event.target.elements.selected.value,
        task: event.target.elements.text.value
    })
        
        // Clear the input and select boxes
        event.target.elements.selected.value = ""
        event.target.elements.text.value = ""

        // save localStorage
        taskArrayJSON = JSON.stringify(taskArray)
        localStorage.setItem("task", taskArrayJSON)

})

const buildTable = function(){
    let table = document.getElementById("table")

    for(let i = 0; i < taskArray.length; i++){
        var row = `<tr>
                    <td>${taskArray[i].job}</td>
                    <td>${taskArray[i].task}</td>
                    <td><button class="btn btn-primary" onclick="deleteButton(this)">Delete</button></td>
                  </tr>`
        table.innerHTML += row
    }
}

buildTable(taskArray)

const deleteButton = function(row){
    let table = JSON.parse(localStorage.getItem("task"))
    localStorage.removeItem("id")
    table.splice(row, 1)
    localStorage.setItem("task", JSON.stringify(table)) 
    



}
//Podle ID najdeme index daného jména a pomocí splice ho odstraníme
const removeTask = function(id){
    const index = taskArray.filter(function(nameTask){
        return nameTask.id === id
    })

    if(index > -1){
        taskArray.splice(index,1)
    }
}

标签： javascripthtmlcssdom-eventsjavascript-objects

解决方案

据我所知，您可以从taskArray中删除您的行，最后像以前一样将其保存在本地。（meybe meke本地任务清空并再次保存）

要找出你想删除哪一行，我建议在你的行上设置一个 data-id 属性，当你点击删除按钮时，获取这个 data-id 并根据它删除行。

推荐阅读