从带有对象的数组中取出特定值

问题描述

制作一个待办事项应用程序，但一直坚持删除数组中的特定值，我做错了什么，我应该如何纠正？ splice 的作用与 shift 方法相同。

还有没有其他方式或数据结构可以用于 todo 应用程序。

const form = document.querySelector("form");
const todoInput = document.querySelector(".todoInput");
const list = document.querySelector(".renderListHere");

const todoList = [];

form.addEventListener("submit",(event) => {
    event.preventDefault();

    const text = todoInput.value.trim();

    if (text === "") {
        console.log("enter something");
    } else {
        addTodo(text);
        todoInput.value = "";
    }
});

const addTodo = (text) => {
    const todo = {
        id: Date.Now(),text,};

    todoList.push(todo);
    renderTodo(todo);
};

const renderTodo = ({ text,id }) => {
    const li = document.createElement("li");

    li.classList.add("todoListItems");

    li.innerHTML = `
    <span> ${text} </span>
    <button id="${id}" class="del-btn"> x
    </button>
        `;

    list.append(li);
};

list.addEventListener("click",(event) => {
    if ((event.target.className = "del-btn")) {
        const arr = todoList.filter(
            (item) => item.id === parseInt(event.target.id)
        );
         todoList.splice(arr,1);

    }
});

解决方法

我认为您误解了 filter 方法。

Array.filter() 函数返回一个新数组，因此在您的情况下，您可以使用：

todoList = todoList.filter(
   (item) => item.id !== parseInt(event.target.id)
);

因此，您仅使用 id 不同于 todoList 的项目过滤 event.target.id，并将结果应用于相同的 todoList 变量。

,

 const arr = todoList.filter(
        (item) => item.id !== parseInt(event.target.id)
    );
     
}

它返回新数组

你不需要 splice()