JavaScript新手求助：TodoList按ID删除功能异常排查

嘿，我看了你的代码，发现几个关键问题导致删除功能没法正常工作，咱们一步步拆解：

核心问题1：闭包导致的count变量引用错误 #

你在给删除按钮绑定点击事件时，用了全局的count变量，但每次点击Add按钮后count都会递增。当你后续点击删除按钮时，count已经不是当前那一行对应的ID数值了——比如你添加了3个项，count变成3，这时候点击第一个项的删除按钮，代码里找tr-3，但第一个项的tr是tr-0，自然找不到，删除逻辑就失效了。

另外你写的list_item.removeChild(tr)虽然看似能拿到当前创建的tr，但这是因为forEach循环的作用域偶然生效，但如果后续代码调整，这个逻辑很容易出问题，而且count--会导致后续新增的项ID重复，反而会引发更多bug。

核心问题2：冗余的数组处理逻辑 #

每次点击Add按钮时，你创建了todoItems数组，push一个元素后又forEach循环一次——这完全是多余的，因为你每次只添加一个todo项，直接处理单个todoItem就行，没必要绕数组这一圈，反而增加了代码复杂度。

修复后的代码 #

HTML部分（无需修改） #

<body> 
  <h1>todo list</h1> 
  <div> 
    <input type="text" id="item"> 
    <button type="button" id='click-function'>Add</button> 
  </div> 
  <table> 
    <thead> 
      <tr> 
        <th>ID</th><th>コメント</th><th>状態</th><th></th> 
      </tr> 
    </thead> 
    <tbody id="list_item"> </tbody> 
  </table> 
  <script src="index.js"></script> 
</body>

JavaScript部分（修复后） #

const myfunc = document.getElementById('click-function');
let count = 0;

myfunc.addEventListener('click', function() {
  const todoItem = document.getElementById('item').value;
  // 空输入不处理
  if (!todoItem.trim()) return;

  const btn_1 = document.createElement('button');
  const btn_2 = document.createElement('button');
  btn_1.textContent = '作業中';
  btn_2.textContent = '消去';
  btn_2.type = 'button';
  btn_2.dataset.id = count; // 用dataset存储当前ID，比用id更灵活

  const td_1 = document.createElement('td');
  const td_2 = document.createElement('td');
  const td_3 = document.createElement('td');
  const td_4 = document.createElement('td');
  const tr = document.createElement('tr');
  tr.id = "tr-" + count;

  td_1.textContent = count;
  td_2.textContent = todoItem;
  td_3.appendChild(btn_1);
  td_4.appendChild(btn_2);
  tr.appendChild(td_1);
  tr.appendChild(td_2);
  tr.appendChild(td_3);
  tr.appendChild(td_4);
  
  document.getElementById('list_item').appendChild(tr);

  // 删除按钮点击事件：直接通过按钮找到父级tr，最可靠
  btn_2.addEventListener('click', function() {
    const currentTr = this.closest('tr');
    if (currentTr) {
      currentTr.remove();
    }
  });

  count++;
  // 清空输入框
  document.getElementById('item').value = '';
});

关键修改点说明 #

1. 去掉了冗余的数组逻辑：直接处理单个todoItem，代码更简洁。
2. 用dataset存储ID：给删除按钮绑定当前项的ID，避免闭包导致的变量引用问题，也比用按钮ID更灵活。
3. 删除逻辑优化：用closest('tr')直接找到按钮所在的行，不用依赖ID查找，更可靠。
4. 新增空输入判断：避免添加空的todo项，优化用户体验。
5. 删除后不修改count：ID只是唯一标识，不需要连续，这样可以避免新增项出现ID重复的问题。

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