原生JS开发TODO-LIST删除localStorage待办项无响应问题求助

问题根因 #

你的代码存在4个核心问题导致功能失效：

• 事件绑定时机错误：页面初始化时就查询.trash-icon元素绑定事件，但本地存储渲染的列表项是后续动态生成的，这部分元素没有绑定点击事件；同时DOMContentLoaded的回调你错误加了执行括号，导致渲染函数会立即执行，而非等待DOM加载完成
• 变量未定义：deleteItem函数中传入deleteFromLocalStorage的item变量没有在作用域内声明，属于非法引用
• 删除函数逻辑缺失：deleteFromLocalStorage目前仅做了存储读取，没有实现过滤待删除项、更新本地存储的核心逻辑
• DOM层级取值不可靠：连续调用parentElement获取待删除节点，一旦点击到图标内部渲染的子元素就会取错节点层级

修复后完整代码 #

// 请根据你实际的DOM结构替换下面两个容器的选择器
const listContainer = document.querySelector('.todo-list')
const container = document.querySelector('.todo-container')

// 用事件委托统一处理删除点击，自动兼容动态生成的列表项
container.addEventListener('click', (e) => {
  if(e.target.classList.contains('trash-icon')) {
    deleteItem(e)
  }
})

let deleteItem = (event) => {
  // 用closest精准匹配待删除的todo项，避免层级取值错误
  const todoItem = event.target.closest('.todo--item')
  // 提取待删除项的文本内容
  const itemText = todoItem.querySelector('.list--item').textContent
  // 先移除页面DOM
  todoItem.remove()
  // 再移除本地存储对应项
  deleteFromLocalStorage(itemText)
}

// 写入本地存储
function savingToLocalStorage(item) {
  let items = localStorage.getItem("items") ? JSON.parse(localStorage.getItem("items")) : []
  items.push(item)
  localStorage.setItem("items", JSON.stringify(items))
}

// 从本地存储渲染列表
function retrievingFromLocalStorage() {
  let items = localStorage.getItem("items") ? JSON.parse(localStorage.getItem("items")) : []
  items.forEach((item)=> {
    const todoDIV = document.createElement("div");
    todoDIV.classList.add("todo--item");
    todoDIV.innerHTML = `
      <div>
        <input type="radio" name="radio" class="radioBtn">
        <li class="list--item">${item}</li>
      </div>
      <div>
        <i class="fas fa-trash trash-icon"></i>
      </div>
    `
    listContainer.appendChild(todoDIV);
  });
}

// DOM加载完成后执行渲染，注意函数名后不要加括号
document.addEventListener("DOMContentLoaded", retrievingFromLocalStorage);

// 从本地存储删除对应项
function deleteFromLocalStorage(itemText) {
  let items = localStorage.getItem("items") ? JSON.parse(localStorage.getItem("items")) : []
  // 过滤掉待删除的条目
  items = items.filter(text => text !== itemText)
  // 把更新后的数组重新写入本地存储
  localStorage.setItem("items", JSON.stringify(items))
}

关键改动说明 #

1. 把删除按钮的遍历绑定改成事件委托，把点击事件绑在外层容器上，自动兼容后续新增、本地存储渲染的动态列表项，无需重复绑定事件
2. 修正DOMContentLoaded的回调传参，去掉函数后面的执行括号，保证DOM加载完成后再执行渲染逻辑
3. 用closest()方法替代连续取parentElement，精准匹配待删除的.todo--item节点，不会因为点击位置偏差取错节点
4. 从待删除节点中提取待办文本作为匹配依据，传入删除函数，解决原代码变量未定义的问题
5. 补全deleteFromLocalStorage的数组过滤、存储重写逻辑，真正实现本地存储项删除
6. 简化了本地存储读取的判空写法，逻辑与原代码完全一致但更简洁

如果你的待办列表允许存在重复内容，建议给每个待办项生成唯一id作为匹配依据，避免filter误删文本相同的其他条目。

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