如何用JavaScript实现点击事件删除数组内指定对象（TodoList场景）

架构老林

2026-9-27

Todo List 精准删除对应数组对象的实现方法

现有代码的问题

存入数组的待办对象只有text属性，没有唯一标识，无法区分内容相同的两个任务
删除逻辑中的list[i].num == i判断完全不生效，你从未给待办对象添加过num属性

最优实现方案

给每个待办对象添加唯一标识，绑定删除事件时同步记录当前待办的唯一id，删除时通过id匹配找到对应数组元素即可，不会出现误删问题，完整修改后的JS代码如下：

const input = document.querySelector(".input");
const maindiv = document.querySelector(".maindiv");
const list = []
// 也可以用Date.now()生成唯一id，这里用自增数字更直观
let todoIdCounter = 0

input.addEventListener("keydown", function (e) {
    if (input.value && e.keyCode === 13) {
        const div = document.createElement("div")
        const title = document.createElement("h1")
        const btn = document.createElement("button")

        title.textContent = input.value
        btn.textContent = "remove"
        // 新增待办时生成唯一id
        const currentTodoId = todoIdCounter++
        list.push({ 
            text: input.value,
            id: currentTodoId
        })
        
        btn.addEventListener("click", function (e) {
            // 匹配id找到对应待办的数组下标
            const targetIndex = list.findIndex(todo => todo.id === currentTodoId)
            // 匹配到就删除数组元素
            if (targetIndex !== -1) {
                list.splice(targetIndex, 1)
            }
            // 删除DOM节点
            e.target.parentElement.remove()
            // 可打开下方注释验证数组删除结果
            // console.log(list)
        })

        div.appendChild(title)
        div.appendChild(btn)
        maindiv.appendChild(div)
        // 新增后清空输入框，优化使用体验
        input.value = ''
    }
})