인프런 커뮤니티 질문&답변

삭제버튼도 아이콘폰트로 바꾸고 이것저것 추가해서 해봤습니다.

근데 모든 작동이 다 잘되는데,

만약 5개의 목록이 있고 처음에 각 항목의 삭제버튼을 클릭할시에는 다 잘 되는데요,

근데 1,2개 삭제해보고 나서 새로고침을 누른 후에는 각 항목의 삭제버튼을 클릭하면 화면상에는 제대로 되는데 로컬스토리지는 무조건 다 삭제가 됩니다. delItem 부분에서는 잘못이 있는걸까요?

const form =document.querySelector('form');
const input =document.querySelector('input');
const ul = document.querySelector('ul');
const todoCount = document.querySelector('.todo-count'); 
const clearAll = document.querySelector('.clear-all'); 

let todos = []; 

const save = () => {
  localStorage.setItem('todos', JSON.stringify(todos));
};

const updateTodoCount = () => {
  todoCount.textContent = todos.length;
};

const delItem = (event) => {
  const target = event.target.parentElement;

  todos = todos.filter((todo) => todo.id !== parseInt(target.id));

  save();
  target.remove();
  
  updateTodoCount();  
};

const addItem = (todo) => {  
  if(todo.text !== ''){ 
    const li = document.createElement('li'); 
    const span =document.createElement('span');
    const icon = document.createElement('i');

    icon.classList.add('fa-solid','fa-trash-can');
    span.innerText = todo.text;
    icon.addEventListener('click',delItem);

    ul.appendChild(li);  
    li.appendChild(span);
    li.appendChild(icon); 
    li.id = todo.id; 

    updateTodoCount(); 
  }
};

const handler = (event) => {
  event.preventDefault();
  
  const todo = {
    id: Date.now(),
    text: input.value,
  };

  if((input.value) !== '') {  
    todos.push(todo);
    addItem(todo)  
    save();
    input.value = '';
  }
  
};

const init = () => {
  const userTodos = JSON.parse(localStorage.getItem('todos')); 

  if(userTodos){
    userTodos.forEach((todo) => {
      addItem(todo);
    });
    //todos = userTodos;
    todoCount.textContent = 0;  
  }
};

clearAll.addEventListener('click', () => {
  ul.innerHTML = '';
  todoCount.textContent = 0;
  todos = [];
  localStorage.removeItem('todos');
});

init();
form.addEventListener('submit',handler);