JavaScript TODO列表删除按钮绑定异常：点击无效且误关联添加按钮

核心问题 #

你的代码里有两个关键错误导致删除功能失效，还意外影响了添加按钮：

• 事件绑定方式错误：new_button.addEventListener('click', removeTodo(this)) 这行代码不是绑定点击事件，而是立即执行removeTodo(this)，并且这里的this指向的是全局window对象（而非创建的删除按钮），导致函数执行时找不到正确的父元素，同时还会在每次添加任务时就错误触发一次删除逻辑。
• 重复绑定事件：代码里重复写了两次new_button.addEventListener('click', removeTodo(this))，完全多余，只会加重问题。

修复方案 #

方案1：修改事件绑定逻辑，传递正确的按钮元素

修改addTODO函数中删除按钮的事件绑定部分，用匿名函数包裹，确保点击时才触发removeTodo并传入正确的按钮：

var counter = 1;

function addTODO() {
  var new_div = document.createElement('div');
  var new_checkBox = document.createElement('input');
  new_checkBox.type = "checkbox";
  new_checkBox.id = "chk" + counter;
  var new_label = document.createElement('label');
  new_label.for = new_checkBox.id;
  new_label.innerHTML = document.getElementById('text_input').value;
  var new_button = document.createElement('button');
  // 修复事件绑定：用匿名函数包裹，点击时才执行removeTodo并传入当前按钮
  new_button.addEventListener('click', function() {
    removeTodo(this);
  });
  new_button.innerHTML = "X";
  new_div.appendChild(new_checkBox);
  new_div.appendChild(new_label);
  new_div.appendChild(new_button);
  document.getElementById('todoBlock').appendChild(new_div);
  counter++;
  // 删除重复的事件绑定代码
}

function removeTodo(button) {
  button.parentNode.remove();
}

方案2：利用事件对象获取触发元素（更简洁）

不需要传递按钮参数，直接通过事件对象的target属性获取点击的按钮，这样代码更简洁：

var counter = 1;

function addTODO() {
  var new_div = document.createElement('div');
  var new_checkBox = document.createElement('input');
  new_checkBox.type = "checkbox";
  new_checkBox.id = "chk" + counter;
  var new_label = document.createElement('label');
  new_label.for = new_checkBox.id;
  new_label.innerHTML = document.getElementById('text_input').value;
  var new_button = document.createElement('button');
  // 直接绑定函数引用，事件处理函数会自动接收event参数
  new_button.addEventListener('click', removeTodo);
  new_button.innerHTML = "X";
  new_div.appendChild(new_checkBox);
  new_div.appendChild(new_label);
  new_div.appendChild(new_button);
  document.getElementById('todoBlock').appendChild(new_div);
  counter++;
  // 删除重复的事件绑定代码
}

function removeTodo(event) {
  // 通过event.target获取点击的按钮，再删除其父元素
  event.target.parentNode.remove();
}

两种方案都能实现点击X按钮删除对应任务的效果，且不会再影响添加按钮的功能。

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