JavaScript TodoList通过类名删除数组元素失败，错误如何排查？

你的代码存在两个核心错误：

• 事件绑定时机错误：全局的删除按钮事件绑定代码在页面初始化时就会执行，此时你还没有创建任何任务，页面内不存在类名为deleteButton的元素，所以循环不会执行，没有任何删除按钮被绑定点击事件。
• 匹配逻辑错误：你的判断条件用del[i].id和任务名称匹配，但你实际是把任务名称作为id赋值给了删除按钮的父容器createdTask，删除按钮本身没有设置id属性，匹配条件永远不成立，splice方法不会触发。

修复方案 #

推荐在创建任务的同时，直接给当前生成的删除按钮绑定事件，不需要全局遍历绑定，修改后的代码如下：

let btn= document.getElementById("createButton");
let tasks= [];

btn.addEventListener('click', function(){
    let taskName= document.getElementById("taskName").value;
    let startTime= document.getElementById("startTime").value;
    let endTime= document.getElementById("endTime").value;
    let currTask= {
        name: taskName,
        start: startTime,
        end: endTime
    }
    tasks.unshift(currTask);
    let createdTask= document.createElement('div');
    createdTask.id= taskName;
    createdTask.classList.add("mrg-auto");

    createdTask.innerHTML= `
    <p>Task name: ${taskName}</p>
    <p>Start time: ${startTime}</p>
    <p>End time: ${endTime}</p>
    <input type="submit" class="deleteButton" value="Delete">`;
    
    // 直接给当前任务的删除按钮绑定事件
    const delBtn = createdTask.querySelector('.deleteButton');
    delBtn.addEventListener('click', function() {
        // 删除数组中对应任务
        const taskIndex = tasks.findIndex(task => task.name === taskName);
        if (taskIndex !== -1) {
            tasks.splice(taskIndex, 1);
        }
        // 同时删除页面上的任务元素
        createdTask.remove();
    })

    document.getElementsByTagName("main")[0].append(createdTask);
})

// 原有全局绑定删除事件的代码可以完全删除

如果需要保留原有全局绑定的写法，也可以改用事件委托的方式实现，给父级main元素绑定点击事件，判断点击的目标是否为删除按钮再执行删除逻辑即可。

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