点击按钮删除Local Storage中表格项的技术求助

1. 给每个交易添加唯一标识 #

目前你存储的交易对象没有唯一ID，没法精准定位要删除的条目。修改添加交易的代码，给每个新增的交易加上一个唯一ID（用时间戳Date.now()就行，简单易实现）：

const addBtn = document.getElementById('submit-button');
addBtn.onclick = function addTransaction() {
    let amountNow = amountInput.value;
    let inOutNow = inOutInput.value;
    let categoryNow = categoryInput.value;
    let transactions = localStorage.getItem('transactions');
    let transactionObj = [];

    if (transactions) {
        transactionObj = JSON.parse(transactions);
    }

    if (amountNow == "" || amountNow == 0 || inOutNow == "invalid" || categoryNow == "invalid") {
        alert('This input is not valid. Please check if the fields are filled in correctly.');
    } else {
        // 新增唯一ID字段
        transactionObj.push({ 
            "id": Date.now(), 
            "amount": amountNow, 
            "inOut": inOutNow, 
            "category": categoryNow, 
            "month": month, 
            "year": year 
        });
        localStorage.setItem('transactions', JSON.stringify(transactionObj));
        // 建议这里调用渲染函数更新表格，不用刷新页面就能看到新增条目
    }
}

2. 渲染表格时绑定交易ID到删除按钮 #

用forEach渲染表格行的时候，给删除按钮加上data-id属性，把交易的ID存进去，这样点击按钮时就能拿到对应交易的ID：

// 假设你的表格tbody有个id叫transaction-tbody
const tbody = document.getElementById('transaction-tbody');
// 先清空tbody再渲染（避免重复）
tbody.innerHTML = '';

const transactions = JSON.parse(localStorage.getItem('transactions')) || [];
transactions.forEach(transaction => {
    const row = document.createElement('tr');
    // 拼接表格内容，注意删除按钮的data-id
    row.innerHTML = `
        <td>${transaction.amount}</td>
        <td>${transaction.inOut}</td>
        <td>${transaction.category}</td>
        <td>${transaction.month}/${transaction.year}</td>
        <td><button class="delete-btn" data-id="${transaction.id}">删除</button></td>
    `;
    tbody.appendChild(row);
});

3. 用事件委托实现删除功能 #

因为删除按钮是动态生成的，直接绑定事件会失效，用事件委托监听父元素（tbody）的点击事件，判断点击的是删除按钮后，执行删除逻辑：

const tbody = document.getElementById('transaction-tbody');
tbody.addEventListener('click', function(e) {
    // 检查点击的是不是删除按钮
    if (e.target.classList.contains('delete-btn')) {
        // 获取要删除的交易ID
        const targetId = parseInt(e.target.dataset.id);
        // 从localStorage读取数据
        let transactions = JSON.parse(localStorage.getItem('transactions')) || [];
        // 过滤掉ID匹配的交易，得到新数组
        transactions = transactions.filter(item => item.id !== targetId);
        // 把新数组存回localStorage
        localStorage.setItem('transactions', JSON.stringify(transactions));
        // 删除页面上对应的表格行
        e.target.closest('tr').remove();
    }
});

关键说明 #

• 唯一ID是核心：没有ID的话，遇到两条完全一样的交易，你没法确定要删哪一条，时间戳生成的ID足够应付练习场景。
• 事件委托：动态生成的元素（比如新增的删除按钮）没法提前绑定事件，委托到父元素能确保所有按钮都能触发点击逻辑。
• 同步更新DOM和localStorage：删除时既要删掉页面上的行，也要更新localStorage里的数据，这样刷新页面后删除的内容就不会回来了。

内容的提问来源于stack exchange，提问作者Tom