JavaScript待办列表删除功能异常：无法添加及删除列表项

核心错误原因 #

你的代码里有两个关键问题直接导致功能失效：

• 事件绑定逻辑错误：listitem.addEventListener('click', deleteItem(listitem));这行代码直接调用了deleteItem函数，而不是把函数作为事件处理函数传递。结果就是创建列表项的瞬间，删除操作就被执行了，新项刚添加就被删掉，看起来像是无法添加新项。
• 删除函数参数不匹配：deleteItem函数接收的是DOM元素对象，但函数里却用getElementById(paramitem)去查找元素——paramitem本身就是元素，完全不需要再通过ID查找。

修复后的完整代码 #

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="todolistcss.css">
        <title>Todolist</title>
    </head>

    <body>
        <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>

    <script>
       const newcontainer = document.getElementById("toDoContainers");

       function deleteItem(event) {
            // 通过事件对象直接获取点击的元素并删除
            event.target.remove();
       }

       function addnew(){
            let numb = document.getElementById("todolistitems").childElementCount;
            var listitem = document.createElement("li");
            var reallist = document.getElementById("todolistitems");
            var inputvar = document.getElementById("inputfield").value;
            
            // 过滤空输入，避免添加空列表项
            if (!inputvar.trim()) return;
            
            var node = document.createTextNode(inputvar);
            let numbvar = numb +1;

            listitem.appendChild(node);
            listitem.setAttribute('id', numbvar);
            // 传递函数引用，而非立即执行函数
            listitem.addEventListener('click', deleteItem);
            reallist.appendChild(listitem);  
            document.getElementById("inputfield").value = "";
       }
    </script>
    </body>
</html>

额外优化说明 #

• 修复了HTML里的拼写错误：比如<html langauge="en">改为<html lang="en">，viewport元标签里的width-device-width改为width=device-width、initial-scale-1.0改为initial-scale=1.0，避免影响页面响应式表现。
• 加入了空输入校验：防止用户点击添加按钮时生成空的列表项。
• 删除逻辑简化：通过事件对象的target属性直接获取点击元素，不需要依赖ID，代码更简洁可靠。

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