如何通过删除按钮按ID同步删除表格行与localStorage对应数据

现有代码核心问题 #

• 点击删除按钮传入的是按钮DOM对象，不是数组索引，直接用splice(row,1)无法正确定位要删除的数据
• removeTask方法中用filter获取索引是错误用法，filter返回匹配的数组而不是下标
• 删除localStorage数据后没有同步更新内存中的taskArray，也没有重新渲染表格，页面不会同步更新
• buildTable方法直接拼接innerHTML，重复调用会导致表格数据重复渲染
• 多余的localStorage.removeItem("id")逻辑，没有实际作用

修正后完整代码 #

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

// 初始化数据
if(localStorage.getItem("task") !== null){
    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
    })
        
    // 清空输入框
    event.target.elements.selected.value = ""
    event.target.elements.text.value = ""

    // 保存到localStorage
    localStorage.setItem("task", JSON.stringify(taskArray))
    // 提交后重新渲染表格
    buildTable()
})

const buildTable = function(){
    let table = document.getElementById("table")
    // 先清空原有表格内容，避免重复渲染
    table.innerHTML = ""

    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('${taskArray[i].id}')">Delete</button></td>
                  </tr>`
        table.innerHTML += row
    }
}

// 直接传入要删除的任务ID精准匹配
const deleteButton = function(taskId){
    // 过滤掉要删除的项，更新内存数组
    taskArray = taskArray.filter(item => item.id !== taskId)
    // 同步更新localStorage
    localStorage.setItem("task", JSON.stringify(taskArray))
    // 重新渲染表格同步页面视图
    buildTable()
}

// 页面加载完成首次渲染表格
buildTable()

逻辑说明 #

• 删除按钮点击时直接传入当前行任务的唯一ID，避免索引匹配出错的问题
• 每次渲染表格前先清空原有内容，避免数据重复
• 数据变更（新增/删除）后统一调用buildTable更新页面视图，保证内存数据、localStorage数据、页面渲染三者完全同步
• 去掉了冗余的removeTask方法，逻辑合并到删除点击事件中更简洁

内容的提问来源于stack exchange，提问作者Ondřej Němec