待办事项列表删除按钮无法正常工作

Question

smb 可以帮助我处理“待办事项列表”吗？我想念它，不明白它是什么，我的删除按钮工作正常，但在重新加载页面后它停止工作。这里 HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To-Do List</title>
    <link rel="stylesheet" href="to-do-style.css">
</head>
<body>
    <div class="flex-header">
        <h1 id="header">To-Do List</h1>
        <input type="text" id="input-task">
        <button id="add-task-button">ADD TASK</button>
    </div>
    <ul id="task-list">
    </ul>
    <script src="to-do.js"></script>
</body>
</html>

这里是JS

"use strict";
let ul = document.getElementById('task-list');
function loadtodos(){
    let data = JSON.parse(localStorage.getItem('todos'));
    if (data) {
        ul.innerHTML = data;
    }
}
loadtodos();
document.getElementById('add-task-button').addEventListener('click', function (){
    let input = document.querySelector('#input-task');
    let node = document.createElement("li");
    node.classList.add('tip');
    //mark complete/incomplete task
    let confirm = document.createElement('input');
        confirm.type = 'checkbox';
    node.appendChild(confirm);
    //task text
    let spanNode = document.createElement('span');//task text
        spanNode.classList.add('task');
        spanNode.appendChild(document.createTextNode(input.value));
    node.appendChild(spanNode);
    //DELETE task
    let deleteBtn = document.createElement('button');
        deleteBtn.classList.add('delete-btn');
        deleteBtn.textContent = 'X';
        deleteBtn.addEventListener('click', function (){
           node.parentNode.removeChild(node);
           localStorage.setItem('todos', JSON.stringify(ul.innerHTML));
        });
    node.appendChild(deleteBtn);
    //adding element to list
    document.getElementById('task-list').appendChild(node);
    //clear input
    document.getElementById('input-task').value=null;
    //saver
    localStorage.setItem('todos', JSON.stringify(ul.innerHTML));
});

如果我理解正确的话，我需要一个 'add-task-button' 之外的函数，我尝试了 querySelector，但它只删除了 1 行，我不太明白如何使用 querySelectorAll 删除它，因为当我使用它，按钮根本不起作用。

Answer 1

原因很可能是您没有找到带有删除 parentNode 引用的父容器。

对于该删除按钮，您有 2 个选项。一个是调整您的代码。您可以找到待办事项的容器（li 标签）并删除它

    deleteBtn.addEventListener('click', function (e){
       let parent = e.target.closest('li');
       parent.parentNode.removeChild(parent);
       localStorage.setItem('todos', JSON.stringify(ul.innerHTML));
    });

另一种是在函数外，在循环外设置委托事件监听器。它适用于所有当前和将要创建的删除按钮

    document.addEventListener('click', function (e){
       if (e.target.classList.contains('delete-btn')){
         let parent = e.target.closest('li');
         parent.parentNode.removeChild(parent);
         localStorage.setItem('todos', JSON.stringify(ul.innerHTML));
       }
    });

待办事项列表删除按钮无法正常工作

To-Do list remove button doesn't work properly

html

javascript

json

class

local-storage