动态添加的Todo列表项无法删除的问题求助

问题根源 #

• 事件绑定时机错误：页面加载时仅给初始存在的.delete-todo按钮绑定了点击事件，后续动态添加的Todo项里的删除按钮未绑定任何事件，点击自然无反应。
• DOM层级依赖过强：通过多次parentNode链式调用查找目标Todo元素，代码极度脆弱，DOM结构稍有变动就会失效。
• 静态元素集合限制：todoItems是页面加载时获取的初始Todo集合，动态新增的Todo不在这个集合内，导致删除时的匹配逻辑直接失效。

修复方案 #

采用事件委托机制，把点击事件绑定到始终存在的父容器（.items）上，不管是初始还是动态添加的删除按钮，点击事件都会冒泡到父容器被捕获处理。同时简化DOM查找逻辑，直接通过删除按钮定位最近的Todo项。

修改后的完整JS代码 #

let addBtn = document.querySelector(".add-item")
let delBtn = document.querySelector(".del-item")
let items = document.querySelector(".items")

addBtn.addEventListener("click", addTodo)
delBtn.addEventListener("click", clearAllTodos)

// 事件委托处理删除逻辑
items.addEventListener("click", e => {
    // 判断点击的是否是删除按钮
    if (e.target.classList.contains("delete-todo")) {
        // 直接找到最近的Todo父元素并删除
        const targetTodo = e.target.closest(".todo-item")
        targetTodo.remove()
    }
})

function clearAllTodos() {
    items.innerHTML = ``
}

function addTodo() {
    let userInput = document.querySelector(".user-input").value
    // 过滤空输入
    if (!userInput.trim()) return

    items.innerHTML += `<li class="todo-item flex items-center justify-between border-b-[1px] border-gray-500 py-4">
    <div class="flex items-center space-x-4 my-2">
        <input type="checkbox" class="checkbox" />
        <span class="text-lg">${userInput}</span>
    </div>
    <div>
        <div class="dropdown dropdown-hover">
            <label tabindex="0" class="btn btn-ghost btn-sm m-1">...</label>
            <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
                <li><a>Done</a></li>
                <li><a class="delete-todo">Delete</a></li>
            </ul>
        </div>
    </div>
</li>`
    // 添加后清空输入框
    document.querySelector(".user-input").value = ""
}

关键改进点 #

1. 事件委托：利用事件冒泡特性，将删除事件绑定到静态父容器，兼容所有动态生成的删除按钮。
2. 健壮的DOM查找：用closest(".todo-item")替代多层parentNode调用，直接定位目标Todo元素，代码更稳定。
3. 输入校验：避免空内容的Todo被添加，优化用户体验。
4. 清理冗余代码：移除了todoItems、delItems等仅针对初始元素的静态变量，减少无效逻辑。

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