开发待办清单删除功能报Cannot read properties of undefined (reading 'target')错如何解决

• 触发报错的直接原因：绑定删除按钮点击事件时写成了 $('#btn').click(deleteTodos());，函数名后加括号会直接执行该函数，而非将函数作为回调交给点击事件触发。执行时没有传入事件对象参数，导致event为undefined，读取event.target时抛出对应类型错误。
• 额外问题1：所有动态生成的删除按钮、复选框都使用了固定ID（btn、CB），DOM规范要求ID全局唯一，后续新增的元素无法通过ID正确匹配到事件绑定。
• 额外问题2：每次新增待办项都单独绑定事件的写法性能低，也容易出现重复绑定、漏绑定的问题。

var hi = $("#hi");
var button = $("#button");
var input = $("#input");
var ol = $('#ol');

// 把固定ID改为class，避免ID重复
var inputTag = '<input type="checkbox" class="CB">'
var DeleteBtn = '<button class="delete-btn">x</button>'

function deleteTodos (event){
  var removing = event.target.parentElement;
  removing.remove();
}

// 改用事件委托，给父元素ol绑定事件，仅匹配删除按钮触发，一次绑定永久生效
ol.on('click', '.delete-btn', deleteTodos);

$("#button").click(function () {
  var All = '<li class="todo-item">'+inputTag+input.val()+DeleteBtn+'</li>'
  ol.append(All);
  input.val("");
  // 移除原有的单次绑定逻辑
});

• 移除了函数绑定后的括号，确保事件触发时才执行deleteTodos，自动传入事件对象参数
• 将所有动态生成元素的固定ID替换为class，符合DOM规范
• 改用事件委托机制绑定删除事件，不需要每次新增待办项都重复绑定，后续新增的删除按钮也能正常触发删除逻辑

内容的提问来源于stack exchange，提问作者강지수