如何通过索引 position 从存储在本地存储中的数组中删除 object

Question

请参阅下面的 function，如果我删除数组中的第一个 object，它会起作用，视觉上该项目已删除并且本地存储已更新，但是如果我删除第二个或另一个项目它不起作用，ZC1C425Z5268E68394F1C无论如何，第一项并删除所有 rest。 请让我知道我做错了什么。

const deleteNote = (event) => {
  let data = Array.from(JSON.parse(localStorage.getItem("notes")));
  data.forEach((note) => {
    if (note.note === event.value) {
      data.splice(data.indexOf(note), 1);
    }
  });
  localStorage.setItem("notes", JSON.stringify(data));
  event.parentElement.remove();
};

Answer 1

您可以使用数组filter方法删除元素。

const deleteNote = (event) => {
  let data = Array.from(JSON.parse(localStorage.getItem("notes")));
  data = data.filter((note) => note.note !== event.value);
  localStorage.setItem("notes", JSON.stringify(data));
  event.parentElement.remove();
};

Answer 2

您可以使用如下代码的过滤器方法。

const deleteNote = (event) => {
let data = Array.from(JSON.parse(localStorage.getItem("notes")));
data = data.filter(nodte => note.note !== event.value);
localStorage.setItem("notes", JSON.stringify(data));
event.parentElement.remove();
};

Answer 3

如果事件是事件 Object，则需要从event.target获取节点元素

const deleteNote = (event) => {
  let data = Array.from(JSON.parse(localStorage.getItem("notes")));
  data.forEach((note, i) => {
    if (note.note === event.target.value) {
      data.splice(i, 1);
    }
  });
  localStorage.setItem("notes", JSON.stringify(data));
  event.target.parentElement.remove(event.target);
};