[JavaScript] - To Do List 만들기③

https://taehyeon-smilestudy.tistory.com/27?category=1020508 

[JavaScript] - To Do List 만들기①

https://taehyeon-smilestudy.tistory.com/29?category=1020508 

[JavaScript] - To Do List 만들기②

 

마지막으로 삭제 기능을 만듭니다!

(createToDo함수)에 button 실행문을 추가해줍니다.(버튼 클릭이벤트)

button.addEventListener("click", deleteToDo);

function deleteToDoList(deleteEvent) {
  const li = deleteEvent.target.parentElement;
//deleteEvent이벤트가 발생한 target의 parentElement(부모노드)
  li.remove();
  toDos = toDos.filter((todo) => todo.id !== parseInt(li.id));//로컬스토리지에 있는값과 일치하지 않는 값만 다시 배열로 넣습니다.
  localSaveToDos();
}

toDos배열에는 filter 메소드를 이용해서
로컬스토리지에 있는 id값과 li의 id값을 비교해준 후 
filter로 걸러진 배열 값을 다시 (localSaveToDos함수)를 호출해 저장해줍니다.

 

# Filter 메소드는 반드시 true만 리턴합니다 Filter는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용 ex) const arr = [1,2,3,4,5,6,10,11,12];     function filterMan(item){return item < 9};     arr.filter(filterMan);                                      //  [1, 2, 3, 4, 5, 6]   간략하게 화살표 함수를 쓰면   arr.filter(item => item < 9);   화살표함수에는 return을 쓰지않아도 자동으로 반환합니다.

 

# parseInt(li.id)를 사용하는 이유

사진과 같이 html에 있는 li의 id값은 string으로 저장된 반면
로컬스토리지에 있는 id값은 숫자입니다
type이 다르면 비교가 안되기 때문에 parseInt를 사용하여 li.id의 값을 숫자로 변환 후 비교해주는 것입니다.

 

완성!

 

const todoForm = document.querySelector(".todo-form");
const todoInput = todoForm.querySelector("input");
const todoListUl = document.querySelector(".todolist-ul");
 
let toDos = [];
const TODOS_KEY = "toDos";
//로컬 스토리지에 들어갈 키 이름
 
function deleteToDoList(deleteEvent) {
  const li = deleteEvent.target.parentElement;
  li.remove();
  toDos = toDos.filter((todo) => todo.id !== parseInt(li.id));
  localSaveToDos();
}
 
function createToDo(newToDo) {
  const li = document.createElement("li");
  li.id = newToDo.id;
  const span = document.createElement("span");
  const button = document.createElement("button");
  span.innerText = newToDo.text;
  button.innerText = "×";
  button.addEventListener("click", deleteToDoList);
  li.appendChild(span);
  li.appendChild(button);
  todoListUl.appendChild(li);
}
 
function localSaveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
 
function submitToDo(submitEvent) {
  submitEvent.preventDefault();
  const inputValue = todoInput.value;
  todoInput.value = "";
  const newToDoOBJ = {
    text: inputValue,
    id: Date.now(),
  };
  toDos.push(newToDoOBJ);
  createToDo(newToDoOBJ);
  localSaveToDos();
}
 
todoForm.addEventListener("submit", submitToDo);
 
const savedToDos = localStorage.getItem(TODOS_KEY);
 
if (savedToDos !== null) {
  const parseToDos = JSON.parse(savedToDos);
  toDos = parseToDos;
  parseToDos.forEach(createToDo);
  //parseToDos를 createToDo의 매개변수로 넣고 처음부터 끝까지 돌려준다
  //parseToDos에 들어있는 배열값만큼 createToDo함수가 작동된다.
}