如何避免数组中已删除的条目在页面刷新后重新出现

问题原因 #

你当前的删除逻辑仅移除了页面上的表格行DOM元素，既没有修改存储原始数据的expenses数组，也没有对数据做持久化存储。页面刷新时会重新读取初始expenses数组渲染表格，被删除的条目自然会重新展示。同时你代码里还存在变量名不一致的问题：showExpenses函数内定义了table变量指向表格节点，循环拼接内容时却用了未定义的expenseTable变量。

修复方案 #

1. 同步修改数据源 #

删除操作触发时，先从expenses数组中移除对应id的条目，再重新渲染表格，保证视图和数据源一致。

2. 增加本地持久化存储 #

用浏览器的localStorage存储expenses数据，页面初始化时从本地读取数据，数据变更时同步更新本地存储内容，刷新页面就不会恢复初始数据。

提示：如果需要实现跨设备的数据同步，把下述localStorage的读写操作替换为调用服务端的增删改查接口即可。

修复后参考代码 #

// 页面初始化时从localStorage读取数据，没有数据就用空数组
let expenses = JSON.parse(localStorage.getItem('expenses')) || []

// 修复变量名错误的showExpenses函数
const showExpenses = () => {
  const table = document.getElementById('expenseTable');
  table.innerHTML = '';
  for(let i = 0; i < expenses.length; i++){
    table.innerHTML += `
      <tr>
        <td class="expItem">${expenses[i].name}</td>
        <td class="expItem">${expenses[i].date}</td>
        <td class="expItem">$${expenses[i].amount}</td>
        <td><a class="deleteButton" href="#" data-id="${expenses[i].id}">Delete</a></td>
      </tr>
    `;
  }
}

// 修改后的删除逻辑
$(document).ready(function() {
   $('body').on('click', '.deleteButton', function(e) {
     e.preventDefault();
     let deleteID = $(this).data('id');
     // 过滤掉要删除的条目，更新expenses数组
     expenses = expenses.filter(item => item.id !== deleteID)
     // 同步更新localStorage
     localStorage.setItem('expenses', JSON.stringify(expenses))
     // 重新渲染表格
     showExpenses()
   })
})

// 你其他新增条目的逻辑也要同步更新localStorage，新增完调用showExpenses即可

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