Перебор массива, как правильно сделать?

Question

[Юрий Иванов]

Понимаю вопрос очень легкий, но уже несколько часов самостоятельно не могу разобраться, выручите пожалуйста.

Есть такой кусок кода, создает задачу, по клику на кнопку удаляет задачу. Я хочу что бы при клике на задачу она перечеркивалась и падала в конец массива.

todoList.push(item);
Но при добавлении пуш и других попыток отрисовать её в блоке появляются

let todoList = [];
function createItem() {
  const todoText = hero__input.value;
  if (todoText.length >= 1 && todoList.length <= 10) {
    todoList.unshift(todoText);
    hero__input.value = "";
    localStorage.setItem("todoList", JSON.stringify(todoList));
    renderTodo();
  } else if(todoText.length >= 1) {
    animationtext.innerHTML = '10 задач - максимальное количество!';
    animationtext.style.color = '#ff0000';
    animationtext.style.fontSize = '12px';
  } else if(todoList.length <= 10) {
    animationtext.innerHTML = 'Введи какой-нибудь символ!';
    animationtext.style.color = '#ff0000';
    animationtext.style.fontSize = '13px';
  }
  hero__input.focus();
}

function renderTodo() {
  hero__list.innerHTML = "";
  todoList.forEach((text, index) => {
    const item = document.createElement("li");
    const itemButton = document.createElement("button");
    item.classList.add("hero-list__item");
    item.innerText = text;
    itemButton.classList.add("hero-list__btn");
    item.addEventListener("click", (event) => {
      item.classList.toggle('textdecor');
    });
    
    itemButton.addEventListener("click", (event) => {
      todoList.splice(index, 1);
      localStorage.setItem("todoList", JSON.stringify(todoList));
      event.stopPropagation();
      renderTodo();
    });
    item.appendChild(itemButton);
    hero__list.appendChild(item);
  });
}