TypeScript开发问题：点击按钮无法删除对应列表项

问题根源 #

1. 静态获取按钮失效：document.querySelector('.delete')仅能获取页面初始加载时第一个匹配的删除按钮，而通过<template>动态生成的新列表项内的删除按钮不会被包含在这个变量中，导致event.target === deleteButton的判断永远不成立。
2. 事件目标可能不准确：点击按钮时，event.target可能指向按钮内部的文本节点（比如按钮里的"X"），而非按钮元素本身，直接匹配会导致判断失败。

修正方案 #

改用类名检查+事件委托的方式，无需提前获取单个按钮实例，在事件触发时动态判断点击元素是否为删除按钮（或其内部元素）：

修正后的TypeScript代码

const todoListElement = document.getElementById('ordered-todo-list');
const form = document.getElementById('todo-form');

todoListElement?.addEventListener("click", todoListEraser)

function todoListEraser(event: MouseEvent) {
    // 找到点击元素最近的.delete类元素，兼容点击按钮内部文本的情况
    const deleteBtn = (event.target as HTMLElement).closest('.delete');
    if (deleteBtn) {
        // 定位对应父级列表项并移除
        deleteBtn.closest('li')?.remove();
    } else {
        console.log('点击的不是删除按钮');
    }
}

关键修改点 #

• 移除了提前获取单个deleteButton的代码，改为事件触发时动态查找目标按钮
• 使用closest('.delete')：无论点击的是按钮本身还是按钮内的文本节点，都能准确找到对应的删除按钮元素
• 直接通过找到的删除按钮定位父级li，逻辑更稳定可靠

补充说明 #

只要动态生成的列表项被插入到#ordered-todo-list内部，该事件委托逻辑就能自动对新按钮生效，无需为每个新生成的按钮单独绑定事件。

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