TODO列表删除按钮无法删除卡片问题排查求助

你的Delete按钮失效主要有几个核心问题，下面是具体修复：

问题根源 #

• 点击事件逻辑错误：原代码里onclick='${key}.innerHTML=""'把任务名称当成了DOM变量，浏览器根本找不到这个元素
• 未同步删除localStorage数据：就算DOM删了，刷新页面数据又会回来
• 重复ID与无效标识：所有Delete按钮都用id="note"，且卡片没有唯一标识，无法精准定位要删除的元素

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO List</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <style>
        .main-title {
            text-align: center;
        }

        .input {
            border: 2px solid grey;
        }

        .all-todo {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 30px;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">TODO List</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
    <h1 class="main-title">TODO List</h1>
    <div class="container">
        <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label">Task Name</label>
            <input type="text" class="form-control input" id="exampleFormControlInput1">
        </div>
        <div class="mb-3">
            <label for="exampleFormControlTextarea1" class="form-label">Task Details</label>
            <textarea class="form-control input" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-primary" id="main-btn">Create TODO</button>
        <button type="button" class="btn btn-warning" id="clr">Clear LocalStorage</button>
    </div>
    <div class="all-todo"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>
</body>
<script>
    const todoContainer = document.querySelector('.all-todo');
    const taskInput = document.getElementById('exampleFormControlInput1');
    const detailInput = document.getElementById('exampleFormControlTextarea1');

    // 页面加载时渲染已有的TODO
    function renderTodos() {
        todoContainer.innerHTML = '';
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            const value = localStorage.getItem(key);
            addTodoCard(key, value);
        }
    }

    // 添加单个TODO卡片
    function addTodoCard(key, value) {
        const cardId = `todo-${key.replace(/\s+/g, '-')}`; // 处理任务名中的空格，生成唯一ID
        const cardHTML = `
            <div class="card" style="width: 18rem;" id="${cardId}">
                <div class="card-body">
                    <h5 class="card-title">${key}</h5>
                    <p class="card-text">${value}</p>
                    <button type="button" class="btn btn-danger" onclick="deleteTodo('${key}')">Delete</button>
                </div>
            </div>
        `;
        todoContainer.innerHTML += cardHTML;
    }

    // 删除TODO函数
    function deleteTodo(key) {
        // 从localStorage删除
        localStorage.removeItem(key);
        // 从DOM删除对应卡片
        const card = document.getElementById(`todo-${key.replace(/\s+/g, '-')}`);
        if (card) {
            card.remove();
        }
    }

    // 创建TODO按钮事件
    document.getElementById('main-btn').onclick = () => {
        const key = taskInput.value.trim();
        const value = detailInput.value.trim();
        if (key && value) {
            localStorage.setItem(key, value);
            addTodoCard(key, value);
            // 清空输入框
            taskInput.value = '';
            detailInput.value = '';
        } else {
            alert("Task Name or Details cannot be empty!");
        }
    };

    // 清空localStorage按钮事件
    document.getElementById('clr').onclick = () => {
        localStorage.clear();
        todoContainer.innerHTML = '';
    };

    // 页面加载完成后渲染已有TODO
    window.onload = renderTodos;
</script>

</html>

关键修改说明 #

• 新增渲染函数：页面加载时自动读取localStorage中的数据并渲染，解决刷新后数据消失的问题
• 唯一卡片ID：用todo-${key}生成唯一标识，确保能精准定位要删除的卡片
• 独立删除函数：deleteTodo(key)同时处理DOM移除和localStorage数据删除，逻辑清晰
• 修复点击事件：Delete按钮调用deleteTodo('${key}')，正确传入任务名称作为参数
• 优化布局：给.all-todo添加flex-wrap: wrap和gap，避免卡片溢出换行混乱
• 清空输入框：创建TODO后自动清空输入框，提升用户体验

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