元素呢？

解决方案

错误的做法是尝试将父元素直接放入CSS选择器中，例如：

let p = document.querySelector(`${btn.parentElement} .content`); // 错误

这种写法会将btn.parentElement转换为字符串"[object HTMLLIElement]"，导致选择器失效，无法找到目标元素。

正确的做法是利用已有的父元素引用，使用querySelector方法在其内部进行查找：

小米旗下小爱开放平台

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

这段代码首先获取删除按钮的父元素（

元素）。这样就能准确地获取到目标元素。

完整示例

以下是修改后的deleteBtn函数：

function deleteBtn() {
    deleteHTML.forEach(btn => {
        btn.addEventListener("click", () => {
            console.log("delete");
            btn.parentElement.style.display = "none"; // 从页面隐藏

            let p = btn.parentElement.querySelector('.content'); // 获取任务内容元素
            let taskContent = p.textContent; // 获取任务内容

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

            console.log(tasks.length, "length");

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

在这个修改后的函数中，我们首先使用btn.parentElement.querySelector('.content')获取到包含任务内容的

元素，然后通过p.textContent获取到任务的具体内容。接下来，使用tasks.filter方法从tasks数组中移除与该内容匹配的任务对象。

注意事项

• 确保你的HTML结构正确，delete按钮的父元素确实包含一个类名为content的子元素。
• 使用textContent属性获取元素的文本内容，而不是innerHTML，除非你需要处理HTML标签。
• 在删除任务对象时，使用filter方法创建一个新的数组，避免直接修改原数组，这是一种更安全和推荐的做法。

总结

通过本教程，你学会了如何从一个元素的父元素访问其兄弟元素的内容，并将其应用到实际的待办事项应用场景中。掌握正确的DOM操作方法，可以避免不必要的错误，提高代码的可读性和可维护性。记住，利用已有的元素引用，使用querySelector方法在其内部进行查找，是解决此类问题的关键。