[Planner App/JS] to do list 전체삭제 하기 구현

<to do list 전체삭제 하기 구현>

 

JS입문강의를 다듣고 크롬앱을 만드는 강의를 들으며 플래너 앱을 만들어보기로 했다.

드디어 JS를 이용해 만들어보는 첫 프로젝트다

 

얼추 틀은 갖춰졌지만 강의에 없는 내용을 구현하기 위해 해결해야할 문제들이 있었다.

그중 하나는 clear버튼을 하단에 만들어서 해당 요일의 리스트를 전체삭제를 하는것!

간단한 기능이니 구현하기 쉬울줄 알았다. 하지만 좀처럼 되질 않았고..

 

(더닝크루거 효과가 생각난다. 우매함의 봉우리에 있었다. 쉬울거라 생각한거 취소!ㅠㅠ)

 

어제 밤부터 고민하며 잠들다 오늘아침에 해결했다(꿈에서 까지도 이것때매 끙끙거리는 꿈을 꿨다..😂)

 

어쨋든 구현하느데 성공해서 신나서 글을 쓴다.

 

 

---

투두리스트 하단에 clear 버튼을 만들어서 목록을 전체삭제 하게끔 구현하는데 드디어 성공.!

 

처음에는 개별 목록을 지워주는

function deleteTodo(event) {

  const li = event.target.parentElement;

  li.remove();

  toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));

  saveToDos();

}

이걸 응용하면 되지 않을까 해서 함수를 새로 만들어봤지만 실패... event.target을 todos의 id가 있는 경로를 찾지 못했고

그나마 nextSibling이 있었지만 하나씩밖에 삭제를 못했다.

 

구글링중 

let ul = document.querySelector('ul').innerHTML = ''; 

를 작성해서 ul를 초기화시켜주는 방법을 찾았지만 로컬스토리지에서는 삭제가 되지 않기때문에 새로고침하면 지웠던 목록이 생겨나는 문제가 있었다.

 

로컬스토리지를 삭제하는 법을 찾아보니

localStorage.setItem(key, value); // 로컬 스토리지에 저장
localStorage.getItem(key); // 데이터 조회
localStorage.removeItem(key); // 키에 해당되는 데이터 삭제
localStorage.clear(); // 저장소 데이터 전체 삭제

localStorage.removeItem(key); 이걸 써서 로컬스토리지까지 깔끔하게 지워주었다.

 

막상 해결하고보니 별거 아니였지만

함수를 새로만들었다 지웠다 여기다 넣었다 저기다 넣었다ㅋㅋ 

나도 얼른 고수가 되고싶다..!

 

 

---

<js 전체 코드>

const todoForm = document.querySelector('.todo-form');
const todoInput = todoForm.querySelector('input');
const todoList = document.querySelector('.todo-list');
const todoClear = document.querySelector('.clear');


const TODOS_KEY = 'todos';

let toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos) );
}

// clear 동작
function clearToDos(){
    localStorage.removeItem(TODOS_KEY, JSON.stringify(toDos));//로컬스토리지 삭제
    let ul = document.querySelector('ul').innerHTML = '';//화면 목록에서 삭제
}
//

function deleteTodo(event) {
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));
    saveToDos();
}



function paintTodo(newTodo){
    const li = document.createElement('li');
    li.id = newTodo.id;
    const span = document.createElement('span');
    span.innerText = newTodo.text;
    const button = document.createElement('button');
    button.innerText = '×';
    button.addEventListener('click', deleteTodo);
    todoClear.addEventListener('click', clearToDos);
    li.appendChild(span);
    li.appendChild(button);
    todoList.appendChild(li);
}


function handleTodoSubmit(event) {
    event.preventDefault();
    const newTodo = todoInput.value;
    const newTodObj = {
        text: newTodo,
        id: Date.now(),
    }
    todoInput.value = "";
    toDos.push(newTodObj);
    paintTodo(newTodObj);
    saveToDos();
}

todoForm.addEventListener("submit", handleTodoSubmit); 

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos !== null){
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintTodo);
}