我正在创建一个待办事项列表项目。当用户单击删除按钮时，我正在尝试删除todo。我正在使用数组的filter方法删除单击的todo。但当我刷新时，删除的todo会返回。原因是它没有从本地存储中删除。javascript文件最底部的事件侦听器有问题。我试图用filter方法返回的任何内容覆盖数组，并将其保存到本地存储中，但仍然不起作用。
Javascript文件
import Todo from './todo.js';
import './style.css';
const TODO_LIST_KEY = 'TODO_LIST_KEY';
const template = document.querySelector('#list-item-template');
const todoListContainer = document.querySelector('#list');
const form = document.querySelector('.form');
const inputField = document.querySelector('#todo-input');
const loadList = () => {
const dataInStringFormat = localStorage.getItem(TODO_LIST_KEY);
return JSON.parse(dataInStringFormat) || [];
};
const renderTodo = (todo) => {
console.log("I'm inside of renderTodo Method");
const templateClone = template.content.cloneNode(true);
const taskContent = templateClone.querySelector('[data-list-item-text]');
taskContent.innerText = todo.description;
const checkBox = templateClone.querySelector('[data-list-item-checkbox]');
checkBox.checked = todo.completed;
checkBox.addEventListener('change', () => {
todo.completed = checkBox.checked;
saveList();
});
const listItem = templateClone.querySelector('.list-item');
listItem.dataset.todoIndex = todo.index;
todoListContainer.appendChild(templateClone);
};
let todoList = loadList();
todoList.forEach((todo) => renderTodo(todo));
const saveList = () => {
localStorage.setItem(TODO_LIST_KEY, JSON.stringify(todoList));
};
const clearField = () => {
inputField.value = '';
};
form.addEventListener('submit', () => {
if (inputField.value === '') return;
// Create a new Todo
const todoTemplate = new Todo(todoList.length, inputField.value, false);
todoList.push(todoTemplate); // new todo gets added to the list
renderTodo(todoTemplate); //Here it adds that new todo to the list
saveList();
clearField();
});
todoListContainer.addEventListener('click', (e) => {
if (!e.target.matches('[data-button-delete]')) return;
// Get the todo that is clicked on
const parent = e.target.closest('.list-item');
const todoIndex = parent.dataset.todoIndex;
// const todoItem = todoList.find((t) => t.index === todoIndex);
parent.remove(); // removes from the screen
todoList = todoList.filter((todo) => todo.index !== todoIndex);
saveList();
});
超文本标记语言文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List</title>
</head>
<body>
<section class="todo-container">
<ul class="todo-list" id="list">
<li class="heading">
<h3>Today's To Do</h3>
<img
src="https://img.icons8.com/ios-glyphs/30/000000/refresh--v1.png"
alt="refresh-icon"
class="refresh-icon"
/>
</li>
<li>
<form class="form">
<label for="todo-input">
<input
type="text"
id="todo-input"
placeholder="Add to your list..."
/>
</label>
</form>
</li>
</ul>
<article class="footer">
<a href="#">Clear all completed</a>
</article>
</section>
<template id="list-item-template">
<li class="list-item">
<label class="list-item-label">
<input type="checkbox" data-list-item-checkbox />
<span data-list-item-text></span>
</label>
<img
data-button-delete
src="https://img.icons8.com/ios-glyphs/30/000000/trash--v1.png"
alt="delete-icon"
class="delete-icon"
/>
</li>
</template>
</body>
</html>
我猜是待办事项。索引是一个数字<代码>数据集值始终是字符串，因此todo。索引！==todoIndex在执行todo时始终为真。索引和todoIndex是不同的类型。
将todoIndex设置为整数：
const todoIndex = parseInt(parent.dataset.todoIndex);
