解决方案：使用querySelector的正确方式

正确的做法是直接在已知的父元素上调用querySelector方法，并传入CSS选择器字符串。 由于btn.parentElement已经指向了列表项

正确的代码如下：

let p = btn.parentElement.querySelector('.content');

这段代码的含义是：在btn.parentElement所代表的HTML元素（即列表项

小米旗下小爱开放平台

元素。

完整示例与代码解释

以下是修改后的deleteBtn函数，包含了从数组中删除对应任务的完整逻辑：

function deleteBtn() {
    deleteHTML.forEach(btn => {
        btn.addEventListener("click", () => {
            console.log("delete");

            const listItem = btn.parentElement; // 获取列表项
            const taskContent = listItem.querySelector('.content').textContent; // 获取任务内容

            // 从tasks数组中删除对应的任务
            tasks = tasks.filter(task => task.task !== taskContent);

            listItem.style.display = "none"; // 隐藏列表项
            console.log(tasks.length, "length");

            if (tasks.length < 1) {
                console.log("remove background");
                tasksHTML.classList.remove("background");
            }
        });
    });
}

代码解释：

1. const listItem = btn.parentElement;: 获取删除按钮的父元素，即列表项
2. 元素。
3. const taskContent = listItem.querySelector('.content').textContent;: 使用querySelector方法在列表项中查找类名为content的元素（即包含任务名称的

   元素），然后通过.textContent属性获取其文本内容，即任务名称。

4. tasks = tasks.filter(task => task.task !== taskContent);: 使用filter方法创建一个新的tasks数组，其中只包含任务名称不等于taskContent的任务对象。 这相当于从tasks数组中删除了对应的任务。
5. listItem.style.display = "none";: 隐藏列表项，使其从页面上消失。
6. if (tasks.length : 如果tasks数组为空，则移除背景色。

优化建议与注意事项

• 使用唯一标识符： 如果任务名称可能重复，建议在任务对象中添加一个唯一的标识符（例如ID），并将其存储在HTML元素中（例如使用data-id属性）。 这样可以更可靠地删除任务，避免误删。
• 事件委托： 如果列表项是动态添加的，可以考虑使用事件委托，将事件监听器添加到父元素上，而不是每个删除按钮上。 这样可以减少事件监听器的数量，提高性能。
• 数据持久化： 为了在页面刷新后保留任务数据，可以将tasks数组存储到浏览器的localStorage中。

总结

本文介绍了在待办事项应用中，如何正确地从J*aScript任务列表中删除对应任务的方法。 核心在于使用正确的元素选择器，通过querySelector方法在父元素中查找子元素，并使用filter方法从数组中删除对应的任务对象。 同时，还提供了一些优化建议和注意事项，以提高代码的可靠性和性能。 掌握这些技巧可以帮助你更好地开发交互性强的Web应用。