Как удалить элемент массива в localstorage, по нажатию на крестик, и перезаписать массив?

Question

[Andrii-debug]

Сейчас я могу удалять только последний элемент. А мне необходимо текущий.
Вот мой код:

const button = document.querySelector(".btn-add");
const input = document.querySelector(".todo_input");
const task = document.querySelector(".task");
const btnSave = document.querySelector(".btn-save");
const ClearBtn = document.querySelector(".btn-clear");

let tasks = [];

function loadTodos() {
  const data = JSON.parse(localStorage.getItem("task"));

  if (data) {
    for (let i = 0; i < data.length; i++) {
      let render = data[i];

      function returnEL() {
        let li = document.createElement("li");
        let b1 = document.createElement("button");

        li.className = "case";
        li.textContent = render;

        b1.className = "btn";
        b1.innerHTML = "";

        task.appendChild(li);
        li.appendChild(b1);

        b1.addEventListener("click", function delFromLocal() {
            task.removeChild(li);
            let array = JSON.parse(localStorage.getItem('task'));
            array.splice(-1); 
        localStorage.setItem('task', JSON.stringify(array));
        });

        li.addEventListener("click", () => {
          li.classList.toggle("case-active");
        });
      }
      returnEL();
    }
  }
}

//////////////////// listenners ///////////////

button.addEventListener("click", function addTask() {
  if (input.value === "") {
    alert("Write a task");
  } else {
    createEl();
    input.value = "";
    localStorage.setItem("task", JSON.stringify(tasks));
  }
});

ClearBtn.addEventListener("click", function Clear() {
  task.innerHTML = "";
  localStorage.removeItem("task", task);
});

input.addEventListener("keypress", function pressEnter(e) {
  if (e.key === "Enter") {
    if (input.value === "") {
      alert("Write a task");
    } else {
      createEl();
      input.value = "";
      localStorage.setItem("task", JSON.stringify(tasks));
    }
  }
});

///////////////////////////////////////////////

function createEl(data) {
  let li = document.createElement("li");
  let b1 = document.createElement("button");
  data = input.value;

  li.className = "case";
  li.textContent = data;
  tasks.push(data);
  b1.className = "btn";
  b1.innerHTML = "";

  task.appendChild(li);
  li.appendChild(b1);

  b1.addEventListener("click", function delFromLocalSt() {
    task.removeChild(li);
        let array = JSON.parse(localStorage.getItem('task'));
        array.splice(-1); 
    localStorage.setItem('task', JSON.stringify(array));
            

  });

  li.addEventListener("click", () => {
    li.classList.toggle("case-active");
  });
}

loadTodos();

Answer 1

[Сергей Соколов]

1. меньше вложенности
if (data) { ... длинная простыня кода }, при отсутствии else лучше заменить на:

if (! data) return;
...тот же код, на уровень левее

2. некруто объявлять функции внутри if() и тем более внутри цикла for()

3. DRY ("Don't Repeat Yourself" – «не повторяйся»). При обнаружении сохранённых элементов в LS, и при создании новых, происходит одно и то же действие: создание элемента списка, навешнивание событий и пр. В функцию его.

По сути вопроса опять предложу переосмыслить архитектуру. Без деталей, в общем: есть массив (пустой, или заполненный из localStorage). Свежесозданные задания попадают в массив. Удаляемые — удаляются из массива.
При изменениях массива — сохранять обновлённый в LS; стирать всё нарисованное ранее, и рисовать весь список с нуля, как будто только загрузили страницу. Ничего, это быстро )

Comments

[Andrii-debug]

Спасибо!

Answer 2

[alexalexes]

Нужно использовать обертку+замыкание для обработчика, удаляющего элемент по клику.

tasks.push(data); // тут вставили очередной элемент
let task_index = tasks.length - 1; // узнаем его индекс по длине массива, так как он в текущей ситуации последний
// несколько строк спустя
b1.addEventListener("click", 
(function(inner_task_index) // функция-обертка для изоляции контекста, сюда передается значение task_index, я специально выделил его другим именем inner_task_index, чтобы видеть контекст функции-обертки
  {
// обертка возвращает функцию-обработчик события  для addEventListener
return function delFromLocalSt() {
    task.removeChild(li);
        let array = JSON.parse(localStorage.getItem('task'));
        array.splice(inner_task_index, 1); // удаляем элемент по известному индексу используя механизм замыкания, используя контекст функции обертки
    localStorage.setItem('task', JSON.stringify(array));
   }
})(task_index) // вызываем хитрую обертку, чтобы обеспечить изоляцию переменной от контекста функции createEl
);

Comments

[Andrii-debug]

Спасибо за решение!