JavaScript待办列表应用：如何修复删除指定索引任务的异常问题？

我是JavaScript初学者，正在开发一款可在三个板块间移动任务的待办列表应用，但删除功能出现问题。当数组为[1,2,3,4]时，点击任务3的删除按钮，数组首个元素会被删除，剩余[2,3,4]。我知道这与数组索引有关，但不清楚需要修改代码的哪部分，附上相关HTML及JavaScript代码，请求帮助。

<div id="TopArea">
    <input id="taskInput", type="text", onkeyup="noTask()" placeholder="Add a task...">
    <button id="taskButton" onclick="addNewTask()">Add task</button>
   

    <div class="ttlSelectors"id="ttlButtons">
        <button class="todayDefault" id="todayButton">Today</button>
        <button class="tomoDefault" id="tomorrowButton">Tomorrow</button>
        <button class="laterDefault" id="laterButton">Later</button>
    </div>

</div>

<div class="todaySection">
    <h2>Today</h2>
    <ul id="todayList">
    </ul>

</div>

</body>

function getToday(){

//Check if local storage is empty, if not then return
if (localStorage.getItem("todayArray")==null) return;

let savedToday = JSON.parse(localStorage.getItem("todayArray"));
var counter = 0;
    savedToday.forEach(myTask => {
        
        savedTodayLi = document.createElement('li');

        savedTodayDelete = document.createElement("button");
        savedTodayDelete.innerHTML = "&#128465";
        savedTodayDelete.addEventListener("click", deletingMe);

        savedTodayLi.setAttribute("type", "input");
        savedTodayLi.id = "savedTodayLi" + (++counter);
        savedTodayText = document.createTextNode(myTask);
        savedTodayLi.appendChild(savedTodayText);
        savedTodayLi.appendChild(savedTodayDelete);

        document.getElementById("todayList").appendChild(savedTodayLi);
    });

}

function deletingMe() {   
    let savedToday = (JSON.parse(localStorage.getItem("todayArray")));
    todayIndex = savedToday.findIndex(myTask.value);
    savedToday.splice(todayIndex, 1);
    console.log(savedToday);
    localStorage.setItem("todayArray", JSON.stringify(savedToday));
    //event.parentNode.remove();
    }

问题根源 #

1. findIndex用法错误：savedToday.findIndex(myTask.value)不符合API要求，findIndex需要传入回调函数判断元素匹配，直接传未定义的myTask.value会导致索引判断混乱，最终错误删除元素。
2. 未关联DOM与数组项：没有获取当前点击按钮对应的任务文本，无法在数组中定位正确索引。
3. 未删除对应DOM元素：注释的DOM删除代码未生效，任务删除后页面元素仍残留。

修复后的删除函数 #

function deletingMe() {   
    // 获取当前任务的li元素
    const taskLi = this.parentNode;
    // 获取任务文本内容
    const taskText = taskLi.firstChild.textContent.trim();
    
    let savedToday = JSON.parse(localStorage.getItem("todayArray")) || [];
    // 通过回调函数找到对应任务的索引
    const todayIndex = savedToday.findIndex(task => task === taskText);
    
    if (todayIndex !== -1) {
        savedToday.splice(todayIndex, 1);
        localStorage.setItem("todayArray", JSON.stringify(savedToday));
        // 删除页面上的任务元素
        taskLi.remove();
    }
}

额外优化建议 #

• 创建DOM元素的变量（如savedTodayLi、savedTodayDelete）用let/const声明，避免全局变量污染导致的逻辑混乱。
• 处理本地存储为空的情况：JSON.parse(localStorage.getItem("todayArray")) || []，防止获取null引发后续报错。

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