강의

멘토링

로드맵

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

뭉치님의 프로필 이미지
뭉치

작성한 질문수

문법 공부 다음엔, 자바스크립트 프로젝트 101

To Do List (응용)

To Do LIst(응용) 질문

해결된 질문

작성

·

331

0

 안녕하세요! 강의보다가 질문이 생겨 작성합니다.

To Do LIst(응용) 중 삭제 기능이 있는 코드인데요.

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

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

  //remove 메소드
  target.remove();
};

이 코드에서 아래 코드만 삭제해보면 html 구조내 li 만 삭제되고 localStorage에선 삭제가 안되더라구요!

그 이유가 todo의 아이디와 삭제 버튼이 눌린 타겟의 아이디가 같지않으면 todos 배열에 담고, 저장하기 때문이지요?

(즉, 같은 아이디라면 todos 배열에 저장이 되지않음)


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

답변 1

0

이룸코딩님의 프로필 이미지
이룸코딩
지식공유자

뭉치님 안녕하세요!

네 이해하신 바가 맞습니다!
HTML 내에서는 target.remove() 때문에 사라지게 됩니다.
이 부분은 여기를 참고해주세요!

로컬스토리지에는 todos를 저장하는 방식이고,
말씀하신 것처럼 아이디를 기준으로 필터링을 해줌으로써
삭제하고자 하는 요소를 '뺀' 새로운 배열을 만들고 저장하게 됩니다.

뭉치님의 프로필 이미지
뭉치
질문자

답변 감사합니다~!

뭉치님의 프로필 이미지
뭉치

작성한 질문수

질문하기