如何为JavaScript简易Todo列表实现删除按钮功能？

你只需要完善removeItem函数，利用按钮点击时传入的this（即当前按钮元素）来定位并删除对应的任务项，同时同步更新你的任务数组：

function removeItem(btn) {
  // 获取当前按钮所在的<li>元素
  const listItem = btn.parentNode;
  // 从<ul>中移除该任务项
  listItem.parentNode.removeChild(listItem);
  
  // 同步更新任务数组，移除对应任务
  const taskContent = listItem.firstChild.textContent.trim();
  const taskIndex = list.indexOf(taskContent);
  if (taskIndex !== -1) {
    list.splice(taskIndex, 1);
  }
}

补充说明： #

1. 你已经在delete按钮的onclick事件里传了this，所以函数必须接收这个参数（示例里叫btn），它指向被点击的按钮元素。
2. 通过btn.parentNode可以拿到按钮的父元素<li>，再调用removeChild就能把整个任务项从列表中移除。
3. 同步更新list数组是为了保证数据一致性，避免数组里还留存已删除的任务。

顺便修复原代码的两个小问题： #

• task变量未声明，会变成全局变量，建议添加const声明；
• 空任务判断逻辑顺序错误，会导致空任务被加入数组，调整顺序并添加trim()避免纯空格的无效任务：

function addItem() {
  const task = document.getElementById('add').value.trim();
  if (task === "") {
    alert("Please enter a task");
    return;
  }
  list.push(task);
  document.getElementById('unList').innerHTML += `<li> ${task} <button type='button' onclick='change(this)'>done</button><button type='button' onclick='removeItem(this)'>delete</button></li>`;
}

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