为JavaScript待办事项列表项添加删除按钮功能遇阻

你的代码存在两个核心问题，导致添加列表项的功能在绑定删除逻辑后失效：

1. 事件绑定方式错误 #

• 使用addEventListener时，事件名应为click而非onClick（不需要加on前缀）。
• 直接调用deleteitem(listitem)会立即执行删除函数，刚创建的列表项会被立刻移除，看起来像是添加功能失效，正确做法是用匿名函数包裹，确保点击时才触发删除。

2. 删除函数逻辑冗余 #

• deleteitem接收的是元素对象，无需再用getElementById查找，直接操作传入的元素即可。
• element.remove()方法不需要传参数，传入参数会引发语法错误。

修正后的代码 #

JavaScript代码 #

const newcontainer = document.getElementById("toDoContainers");

function deleteitem(element) {
  element.remove();
}

function addnew() {
  let numb = document.getElementById("todolistitems").childElementCount;
  const listitem = document.createElement("li");
  const reallist = document.getElementById("todolistitems");
  const inputvar = document.getElementById("inputfield").value;
  const node = document.createTextNode(inputvar);
  const numbvar = numb + 1;

  listitem.appendChild(node);
  listitem.setAttribute('id', numbvar);
  // 用匿名函数绑定点击事件，点击时才执行删除
  listitem.addEventListener('click', () => deleteitem(listitem));
  reallist.appendChild(listitem);  
  document.getElementById("inputfield").value = "";
}

HTML代码（无需修改） #

<h1>To Do List</h1>
<div class="container">
    <input id="inputfield" type="text"><button id="addToDo" onclick="addnew()">Add</button>
    <div class="tO" id="toDoContainers">
        <ul id="todolistitems">
        </ul>
    </div>
</div>

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