为什么任务没有从本地存储中删除？

Question

当我按下删除任务（x 符号）时出现问题它从 UI 中删除，然后去搜索本地存储以从那里删除它。从存储中删除的功能工作正常，我通过控制台检查了比较 UI 中的任务文本和来自本地存储的任务数组中的任务文本的唯一问题：它们是相同的，都是字符串，但它仍然没有'不起作用，当您重新加载页面时，任务仍在其上，并且没有从本地存储中删除

https://codepen.io/mokai2008/pen/jdxeXJ

// When click  delete the task

taskList.addEventListener('click', removeTask);

function removeTask(e) {
  if(e.target.classList.contains('remove')) {
    if(confirm('Are You Sure?')) {
  e.target.parentElement.remove();
      // Remove from LS
      removeTaskFromLocalStorage(e.target.parentElement);
    }
  }
}

// Remove from LS
function removeTaskFromLocalStorage(taskItem) {
    let tasks;
    if(localStorage.getItem('tasks') === null){
      tasks = [];
    } else {
      tasks = JSON.parse(localStorage.getItem('tasks'));
    }

    tasks.forEach(function(task, index){
      if(taskItem.textContent === task){
        tasks.splice(index, 1);
      }
    });

    localStorage.setItem('tasks', JSON.stringify(tasks));
  }

Answer 1

您的解决方案存在几个问题。

直接回答您的问题，它不删除的原因是因为当您在addTask 函数中将任务添加到HTML 时，元素的textContent 最终是'task '（注意额外的最后的空格）。

快速修复：

if(taskItem.textContent.trimEnd() === task){
    tasks.splice(index, 1);
}

下一个问题是你正在拼接你正在迭代的数组！这将导致索引混乱，您将跳过拼接后的下一项。

例如：

let x = [1,2,3,4,5];
x.forEach(function(item, index) {
    if (item === 3) {
        x.splice(index, 1);
    }
    console.log(item); // prints: 1, 2, 3, 5
});

解决这个问题的最简单方法：

tasks = tasks.filter((task, index) => taskItem.textContent.trimEnd() !== task);