如何实现Todo列表单项删除并同步移除localStorage对应数据？

你的代码已经完成了任务添加和全删功能，要实现单个项的删除，需要修正删除按钮的绑定逻辑，并编写正确的删除处理函数，具体改动如下：

核心问题分析 #

1. 原代码中单个删除按钮的onclick绑定方式错误，会直接执行函数而非点击触发
2. 删除函数未实现从数组和localStorage中移除对应项的逻辑
3. 全删按钮点击后未同步更新页面列表

修改后的完整JavaScript代码 #

const input = document.querySelector('input');
const btn = document.querySelector('button');
const todo = document.querySelector('.todo');
const dtbn = document.querySelector('.delete')
let taskList;
const localKey = 'localItem';

// 统一初始化任务列表
function initTaskList() {
  const localdata = localStorage.getItem(localKey);
  taskList = localdata ? JSON.parse(localdata) : [];
}

// 添加任务逻辑
btn.onclick = () => {
  if (!input.value.trim()) return; // 过滤空内容
  initTaskList();
  taskList.push(input.value.trim());
  localStorage.setItem(localKey, JSON.stringify(taskList));
  input.value = "";
  ShowList();
}

// 删除单个任务
function deleteTask(index) {
  initTaskList();
  taskList.splice(index, 1); // 通过索引精准删除对应项
  localStorage.setItem(localKey, JSON.stringify(taskList));
  ShowList(); // 重新渲染列表同步页面
}

// 渲染任务列表
const ShowList = () => {
  initTaskList();
  let outPut = "";
  taskList.forEach((element, index) => {
    // 绑定索引到删除按钮，确保点击触发正确删除逻辑
    outPut += `<li>${element}<button onclick="deleteTask(${index})">delete</button></li>`
  });
  todo.innerHTML = outPut
}

// 全删任务逻辑
dtbn.onclick = function () {
  localStorage.removeItem(localKey);
  ShowList(); // 全删后同步页面显示
}

// 页面加载时渲染初始列表
ShowList();

关键改动说明 #

• 初始化逻辑封装：新增initTaskList函数统一处理localStorage读取和列表初始化，减少重复代码
• 精准删除：使用任务在数组中的索引作为删除依据，避免重复任务删除错误
• 按钮绑定修正：将onclick改为deleteTask(${index})，确保点击时才执行删除函数
• 空输入过滤：添加判断避免添加空任务
• 页面同步：全删和单删操作后都调用ShowList()，保证页面与localStorage数据一致

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