Web任务管理应用删除功能失效，报错Uncaught TypeError: Cannot read properties of undefined (reading '1')

嘿，我来帮你搞定这个问题！这个报错的根源其实很清晰——你在delItem函数里用到的e.path[1]，并不是DOM事件的标准属性，现在主流浏览器已经逐步停止支持这个非标准API了，这就是为什么所有浏览器都出现删除功能失效的情况。

问题定位 #

看你代码里的delItem函数：

function delItem(e) {
  const listItem = e.path[1]; // 这里触发报错，e.path在当前浏览器环境中是undefined
  // ...后续代码
}

e.path曾经是Chrome等浏览器的非私有实现，用来获取事件传播的路径，但现在浏览器更推崇使用标准的API，这个属性已经被逐步废弃，所以访问e.path[1]就会抛出“无法读取undefined的属性'1'”的错误。

解决方案 #

我们可以用更可靠、兼容性更好的方式来获取目标父元素，比如利用e.currentTarget结合parentElement，或者使用closest()方法精准定位到任务容器。修改后的delItem函数如下：

function delItem(e) {
  // 用closest找到最近的.list-container父元素，不受DOM层级小变动影响
  const listItem = e.currentTarget.closest(".list-container");
  if (!listItem) return; // 容错处理：防止找不到目标元素的情况

  const listItemContent = listItem.children[0].textContent; // 用textContent替代innerHTML，避免HTML字符干扰
  const todosIndex = todos.indexOf(listItemContent);
  const doneIndex = doneTasks.indexOf(listItemContent);

  // 从页面中移除任务元素
  ol.removeChild(listItem);

  // 从待办数组中移除对应项
  if (todosIndex !== -1) {
    todos.splice(todosIndex, 1);
  }

  // 额外优化：如果是已完成任务，同步从已完成数组中移除
  if (doneIndex !== -1) {
    doneTasks.splice(doneIndex, 1);
    localStorage.setItem("donetodos", JSON.stringify(doneTasks));
  }

  numberTasks();
  localStorage.setItem("todos", JSON.stringify(todos));
}

额外说明 #

我还顺便补充了一个细节：原来的代码删除任务时只处理了todos数组，但如果该任务已经被标记为完成（存在于doneTasks数组中），删除操作应该同时将其从doneTasks里移除，避免localStorage中残留无效数据，上面的代码已经补上了这部分逻辑。

替换这个修改后的delItem函数，你的删除功能应该就能在所有浏览器里正常工作啦！

备注：内容来源于stack exchange，提问作者jerryonjrumz