Question

我最近开始在不依赖编码教程的情况下处理我的待办事项列表，这太难了。我可以在我的列表中添加项目，但我无法删除项目。当我单击项目时，所有项目都会被删除。你能帮忙吗？

   <fieldset>
      <legend class="task-list-title">Goals that I need to work on</legend>
        <input
         id="inpKey" 
         type="text"
         placeholder="add new goal"
         aria-label="new list name"
    <button type="button" id="btnInsert">New Goal</button>
    <div id="task_list">

    </div>
</fieldset>

JavaScript 代码

const inpKey  = document.getElementById("inpKey");
const btnInsert = document.getElementById("btnInsert");
const task_list = document.getElementById("task_list");

btnInsert.onclick = function() {
const key = inpKey.value;
   if(key) {
     localStorage.setItem(key, inpKey.value);
     location.reload();
     }
}

for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
task_list.innerHTML += `${key}<br />`
}

task_list.onclick = function() { 
  for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  window.localStorage.removeItem(key);
  task_list.innerHTML = key; 
    } 
 }

Answer 1

所以我认为问题在于您没有检查要删除的特定待办事项，而是将它们全部删除

for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
   // I it would be better if you wrapped each key in its own element
    task_list.innerHTML += `<div>${key}</div>`; // I'm using a `div` so there'll be no need for a `<br/>` tag
}   

task_list.onclick = function(e) {
    // I want to use the event data to find out exactly which localStorage key to delete
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        // Here i'm checking if the key is the same as the todo that you want to delete
        if (key == e.target.innerText) {
            localStorage.removeItem(key); // Removing the todo from storage
            e.target.remove(); // Removing the todo element from the DOM
        }
    } 
}

Answer 2

将新密钥附加到 innerHTML 的 tasks_list 会使您在要删除项目时很难获得密钥。相反，让每个新任务成为 <p> 元素（或无序列表元素）并将该新元素作为子元素附加到 tasks_list 像这样会更容易-

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const newTask = document.createElement('p') //create a new html element
  newTask.classList.add('task') //add a class of "task" to it
  newTask.innerHTML = key //set the innerHTML to equal the key
  task_list.appendChild(newTask) //add the newTask element as a child element of task_list
}

您可以使用 task 类为每个元素添加事件侦听器，方法是遍历每个元素并添加您的事件侦听器。这里的好处是，当您需要单个任务的密钥时，您只需抓住 innerHTML 并使用它-

for(let i = 0; i < tasks.length; i++) {
    tasks[i].addEventListener("click", () => {
        const key = tasks[i].innerHTML
        window.localStorage.removeItem(key)
        location.reload()
    })
}

您当前通过循环 localStorage 删除项目的方式实际上是在每次循环时删除一个元素，而不是检查它正在删除的项目是否是被点击的项目。

>

编辑-a。 mola 的答案与我的类似，但您无需遍历整个本地存储即可找到匹配的密钥。这就是拥有键/值对的美妙之处！只要您知道密钥，您就可以操作数据，而无需先通过循环搜索。

LocalStorage- 无法从待办事项列表中删除项目

2 个答案: