Question

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

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最终是{{1 }}（注意末尾有多余的空格）。

快速修复：

'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
});

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

1 个答案: