JavaScript待办事项列表（TodoList）结合localStorage时指定项删除功能异常问题求助

嘿，我看到你的问题了，这个删除逻辑的问题其实出在参数传递错误和一些小的逻辑疏漏上，咱们一步步来解决它：

问题根源 #

你在调用deleteItem函数的时候，传的是整个todos数组，而不是当前要删除项的索引值。比如你写的deleteItem(todos)，而deleteItem函数里把这个参数当作splice的起始索引，数组被转换成数字时会变成NaN，splice遇到NaN会默认从索引0开始删除，所以每次都会删掉第一个元素，这就解释了你看到的现象。

另外还有两个小问题：

• 每次添加新项或者渲染已有项时，都给remove按钮绑定一次点击事件，会导致点击清空按钮时触发多次localStorage.removeItem，完全没必要。
• deleteItem函数里重复从localStorage读取数据，其实咱们已经有全局的todos数组，直接操作它再保存更高效，也能避免同步问题。

修复后的完整代码 #

下面是调整后的代码，我标注了关键修改的地方：

const add = document.getElementById("additem")
const remove = document.getElementById("removeitem")
const input = document.getElementById("inputBlank")
const contain = document.getElementById("container")
const LOCAL_STORAGE_PREFIX = "TODO_APP_V1"
const TODOS_STORAGE_KEY = `${LOCAL_STORAGE_PREFIX}-todos` // 去掉键名里的空格，避免潜在问题
let todos = loadTodos() // 从本地存储加载数据

// 清空按钮事件只绑定一次，移到外面
remove.addEventListener('click', function () {
  localStorage.removeItem(TODOS_STORAGE_KEY)
  todos = [] // 同步清空全局数组
  contain.innerHTML = "" // 清空页面列表
})

/// 添加新待办项
add.addEventListener('click', function (e) {
  e.preventDefault()
  const inputValue = input.value.trim()
  if (inputValue === "") return alert("Write text in the blank field")
  
  const btn = document.createElement('button');
  const paragraph = document.createElement("th");
  btn.innerText = "x";
  btn.style.background = "";
  paragraph.innerText = inputValue;
  
  // 获取新项的索引（push后是数组最后一位）
  const newIndex = todos.length
  todos.push(inputValue)
  input.value = "";
  
  paragraph.appendChild(btn);
  contain.appendChild(paragraph)
  saveTodos()
  
  btn.addEventListener('click', function () {
    deleteItem(newIndex) // 传递正确的项索引，而非整个数组
    contain.removeChild(paragraph)
  })
})

/// 保存到本地存储
function saveTodos() {
  localStorage.setItem(TODOS_STORAGE_KEY, JSON.stringify(todos))
}

/// 从本地存储加载数据
function loadTodos() {
  const todos = localStorage.getItem(TODOS_STORAGE_KEY)
  return JSON.parse(todos) || []
}

/// 渲染本地存储中的待办项
todos.forEach((element, index) => { // 加上index参数，获取当前项的索引
  const paragraph = document.createElement("th");
  paragraph.innerText = element;
  const btn = document.createElement("button");
  btn.innerText = "x";
  btn.style.background = "";
  paragraph.appendChild(btn);
  contain.appendChild(paragraph);
  
  btn.addEventListener('click', function () {
    deleteItem(index) // 传递当前项的索引
    contain.removeChild(paragraph)
  })
});

/// 修改后的删除函数
function deleteItem(targetIndex) {
  // 直接操作全局todos数组，无需重复读取本地存储
  todos.splice(targetIndex, 1)
  saveTodos() // 复用已有的保存函数，减少重复代码
}

关键修改说明 #

1. 传递正确的索引：不管是新增项还是渲染已有项，都把当前项在todos数组中的索引传给deleteItem函数，让splice精准删除目标元素。
2. 统一存储逻辑：deleteItem直接使用全局的todos数组操作，然后调用已有的saveTodos函数，避免重复代码和数据同步问题。
3. 优化事件绑定：把清空按钮的事件绑定移到外部，只执行一次，避免多次绑定导致的重复触发。
4. 修复键名格式：去掉存储键名里的空格，避免潜在的存储异常问题。

这样修改后，点击任意项的删除按钮，就能正确删除对应元素，localStorage里的数据也会和页面保持一致啦！

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