原生JS实现待办项同时从DOM和localStorage中删除的方法

现有代码存在三个核心问题导致无法精准删除localStorage条目：

• 事件绑定错误：createToDoInput中给X按钮绑定点击事件时，直接执行了removeToDoInput函数而非传入事件回调，会导致逻辑提前触发、绑定失效
• 删除逻辑错误：原删除函数的嵌套循环会清空所有ToDo 前缀的localStorage条目，没有做精准匹配
• 缓存数据不匹配：全局的allToDoInputs如果是提前缓存的节点列表，删除DOM后不会自动更新，会导致索引和实际存储的内容错位

1. 重写createToDoInput函数（整合删除逻辑，废弃原removeToDoInput函数） #

function createToDoInput() {
    const newToDoInputCheckbox = document.createElement("input");
    newToDoInputCheckbox.type = "checkbox";
    const newToDoInput = document.createElement("input");
    const newXBtn = document.createElement("span");

    toDoInputContainer.appendChild(newToDoInputCheckbox);
    toDoInputContainer.appendChild(newToDoInput);
    toDoInputContainer.appendChild(newXBtn);

    newToDoInputCheckbox.classList.add("checkbox");
    newToDoInput.classList.add("to-do-input");
    newXBtn.classList.add("X");
    newXBtn.textContent = "X";

    // 直接在元素创建时绑定删除回调，避免参数传递混乱
    newXBtn.addEventListener("click", () => {
        // 第一步：移除当前项的DOM节点
        toDoInputContainer.removeChild(newToDoInputCheckbox);
        toDoInputContainer.removeChild(newToDoInput);
        toDoInputContainer.removeChild(newXBtn);

        // 第二步：同步更新localStorage
        // 先清空所有旧的ToDo存储条目
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            if (key.startsWith("ToDo ")) {
                localStorage.removeItem(key);
            }
        }
        // 实时获取当前页面剩余的所有待办输入框，按最新顺序重新存入localStorage
        const latestToDoInputs = document.querySelectorAll(".to-do-input");
        latestToDoInputs.forEach((input, index) => {
            localStorage.setItem(`ToDo ${index}`, input.value.trim());
        });
    });
}

2. 修正saveToDoInputs函数，避免使用缓存的旧节点列表 #

function saveToDoInputs() {
    localStorage.setItem("Title", toDoListTitle.value.trim());
    // 每次保存前实时获取最新的输入框列表，保证索引和内容匹配
    const latestToDoInputs = document.querySelectorAll(".to-do-input");
    for (let i = 0; i < latestToDoInputs.length; i++) {
        localStorage.setItem("ToDo " + i, latestToDoInputs[i].value.trim());
    }
}

修改后采用「DOM为准、覆盖存储」的策略，无需计算删除项的索引：删除对应DOM节点后，以当前页面剩余的待办项为准，清空旧存储后重新写入，天然实现localStorage和DOM内容完全同步，不会出现索引错位、残留无效条目的问题。

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