JavaScript TODO列表：点击删除按钮移除新创建DOM列表项

你的代码里有两个关键问题导致删除按钮无法正常工作：

1. 变量作用域错误：but和li是在添加按钮的点击回调内部声明的，外部的事件监听器根本访问不到这些变量，等于白绑定。
2. 事件绑定时机错误：你试图在删除按钮还未创建时就为其添加事件监听，这显然不可能生效。

下面提供两种修复方案，可根据需求选择：

方案一：创建按钮时直接绑定事件 #

每次生成删除按钮的同时，为其添加点击事件监听器，利用闭包特性确保每个按钮能对应到自己所属的列表项：

let btn = document.querySelector('.add');
let ul = document.querySelector('.list');
let input = document.querySelector('.txt');

btn.addEventListener('click', function () {
  let txt = input.value.trim();
  if (!txt) return; // 避免添加空列表项
  
  let li = document.createElement('li');
  li.textContent = txt;
  
  let deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'delete';
  
  // 为当前删除按钮绑定点击事件
  deleteBtn.addEventListener('click', function () {
    ul.removeChild(li);
    // 或者更简洁：li.remove(); 直接删除自身
  });
  
  li.appendChild(deleteBtn);
  ul.appendChild(li);
  input.value = ''; // 清空输入框，提升操作体验
});

方案二：事件委托（更推荐） #

利用事件冒泡机制，仅在父元素ul上绑定一次事件监听器，通过判断点击目标是否为删除按钮来处理删除操作。这种方式更高效，尤其适合列表项较多的场景：

let btn = document.querySelector('.add');
let ul = document.querySelector('.list');
let input = document.querySelector('.txt');

btn.addEventListener('click', function () {
  let txt = input.value.trim();
  if (!txt) return;
  
  let li = document.createElement('li');
  li.textContent = txt;
  
  let deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'delete';
  deleteBtn.classList.add('delete-btn'); // 给删除按钮添加类名，方便识别
  
  li.appendChild(deleteBtn);
  ul.appendChild(li);
  input.value = '';
});

// 在父元素ul上监听点击事件，统一处理所有删除操作
ul.addEventListener('click', function (e) {
  if (e.target.classList.contains('delete-btn')) {
    let li = e.target.parentElement;
    ul.removeChild(li);
    // 或者 li.remove();
  }
});

额外优化点 #

• 添加输入内容非空判断，避免创建无效列表项
• 清空输入框，优化连续添加的操作体验
• 方案二中为删除按钮添加类名，更精准地判断点击目标

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