从包含对象的数组中取出特定的值

Question

制作一个todo应用程序，但在删除数组中的特定值时卡住了，我做错了什么，我应该如何纠正?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);
}
});

Answer 1

我想你误解了filter方法。

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

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

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

Answer 2

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

}

返回新数组

不需要splice()