Todo应用开发：点击删除按钮移除对应任务的实现方法咨询

嘿，这个问题我之前帮好几个开发者捋清楚过——本质上就是要让删除按钮和它对应的任务、列表项建立关联对吧？咱们一步步来拆解可行的解决方案：

方法1：给每个按钮绑定专属的删除逻辑（闭包实现） #

你可以在创建删除按钮的时候，利用闭包保存当前任务在数组里的索引，这样点击按钮时就能精准找到要删除的任务：

// 假设你的任务数组叫 todos，比如 let todos = [{text: '买牛奶'}, {text: '写代码'}];
function buildList(){ 
  var item = document.getElementById('items'); 
  item.classList = 'well well-sm';
  // 先清空现有列表，避免重复渲染
  item.innerHTML = '';
  
  todos.forEach(function(todo, index) {
    var newLi = document.createElement('li');
    newLi.textContent = todo.text; // 假设任务对象有text属性
    
    // 创建删除按钮
    var deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.style.marginLeft = '10px'; // 加个样式区分任务和按钮
    
    // 给按钮绑定点击事件，闭包保存当前任务的index
    deleteBtn.addEventListener('click', function() {
      // 第一步：从数组中删除对应任务
      todos.splice(index, 1);
      // 第二步：要么直接移除当前li，要么重新渲染整个列表
      newLi.remove(); // 直接移除DOM节点，效率更高
      // 或者调用 buildList(); 重新渲染，适合需要同步其他状态的场景
    });
    
    newLi.appendChild(deleteBtn);
    item.appendChild(newLi);
  });
}

这个方法的核心是：每个按钮的点击事件函数都“记住”了自己对应的任务索引，点击时就能精准操作数组和DOM。

方法2：事件委托（更高效的批量处理方式） #

如果你的Todo列表会频繁新增/删除任务，给每个按钮单独绑事件会有点冗余，这时候用事件委托更合适——只给父元素（ul）绑一次事件，通过事件目标判断是不是删除按钮：

// 初始化时给ul绑定一次事件，不用每次buildList都绑
document.getElementById('items').addEventListener('click', function(e) {
  // 判断点击的是不是删除按钮
  if (e.target.tagName === 'BUTTON' && e.target.textContent === '删除') {
    // 找到对应的li元素
    var targetLi = e.target.closest('li');
    // 从数组中删除对应任务：通过li的data-index属性拿到索引
    var taskIndex = parseInt(targetLi.dataset.index);
    todos.splice(taskIndex, 1);
    // 移除DOM里的li
    targetLi.remove();
  }
});

// 修改你的buildList函数，给每个li加上data-index属性
function buildList(){ 
  var item = document.getElementById('items'); 
  item.classList = 'well well-sm';
  item.innerHTML = '';
  
  todos.forEach(function(todo, index) {
    var newLi = document.createElement('li');
    newLi.textContent = todo.text;
    // 给li添加自定义属性，存任务的索引
    newLi.dataset.index = index;
    
    var deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.style.marginLeft = '10px';
    
    newLi.appendChild(deleteBtn);
    item.appendChild(newLi);
  });
}

事件委托的好处是：不管后续新增多少任务，都不用再给新按钮绑事件，性能更好，代码也更简洁。

关键提醒 #

不管用哪种方法，都要确保任务数组和DOM同步更新：要么删除数组元素后直接移除对应的li，要么重新调用buildList()渲染整个列表——如果只改数组不改DOM，页面不会更新；只改DOM不改数组，下次渲染又会把删掉的任务显示出来。

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