如何访问JavaScript动态创建的待办列表按钮并绑定删除事件

你有两种常用的方式实现动态生成按钮的事件绑定，不需要手动给按钮分配ID：

方法1：创建元素时直接绑定事件 #

你在动态生成button元素时，已经拿到了对应的DOM对象，直接在此时绑定点击事件即可，不需要后续再获取。
修改你的addTask函数如下：

var addTask = function() {
  var text = document.getElementById('listItem').value;
  // 输入为空就不添加任务
  if (!text.trim()) return;
  var li = document.createElement('li');
  var buttons = document.createElement('button');
  buttons.innerHTML = "X";
  var buttons2 = document.createElement('button');
  buttons2.innerHTML = "Done";
  li.innerHTML = text;
  li.append(document.createTextNode(" "));

  // 直接给两个按钮绑定删除当前任务的事件
  const deleteCurrentLi = () => li.remove();
  buttons.addEventListener('click', deleteCurrentLi);
  buttons2.addEventListener('click', deleteCurrentLi);

  document.getElementById('laListe').appendChild(li).appendChild(buttons);
  li.append(document.createTextNode(" "));
  li.append(buttons2);
  // 添加完成后清空输入框
  document.getElementById('listItem').value = '';
}

方法2：使用事件委托（更推荐，适合大量动态元素的场景） #

利用事件冒泡的特性，直接给所有待办项的公共父元素ul#laListe绑定点击事件，后续所有动态添加的子元素的点击事件都会冒泡到父元素上，统一处理即可：
不需要修改你的addTask函数，只需在JS代码全局添加如下绑定即可：

// 给父容器绑定委托事件
document.getElementById('laListe').addEventListener('click', function(e) {
  // 判断点击的目标是否是按钮
  if (e.target.tagName === 'BUTTON') {
    // 找到按钮所属的最近的li元素，直接删除
    e.target.closest('li').remove();
  }
});

这种方案的优势是不管你后续添加多少个待办项，都不需要重复绑定事件，性能更好，代码更简洁。

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