바닐라 JS) 18. To Do List 삭제하고 저장하기

Sep 03, 2024

1. To Do List에 값 삭제하기

<li> 태그안에 X 버튼 추가하기

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     const button = document.createElement("button") // button 요소 만들기
     button.innerText = "❌";
     li.appendChild(span); // span 요소에 li 추가하기
     li.appendChild(button); //  span 요소에 button 추가하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    toDoInput.value = ""; // 입력 필드 비우기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

클릭 이벤트 추가하기

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function deleteToDo() {
    console.log("X버튼을 눌렀어요");
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     const button = document.createElement("button") // button 요소 만들기
     button.innerText = "❌";
     button.addEventListener("click", deleteToDo);
     li.appendChild(span); // span 요소에 li 추가하기
     li.appendChild(button); //  span 요소에 button 추가하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    toDoInput.value = ""; // 입력 필드 비우기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

어떤 버튼이 눌렀는지 알 수 없음…

event 내부 확인해보기

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function deleteToDo(event) {
    console.log(event);
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     const button = document.createElement("button") // button 요소 만들기
     button.innerText = "❌";
     button.addEventListener("click", deleteToDo);
     li.appendChild(span); // span 요소에 li 추가하기
     li.appendChild(button); //  span 요소에 button 추가하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    toDoInput.value = ""; // 입력 필드 비우기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

클릭된 요소 확인하기

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function deleteToDo(event) {
    console.dir(event.target); // 어떤 요소가 클릭되었는지 확인하기
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     const button = document.createElement("button") // button 요소 만들기
     button.innerText = "❌";
     button.addEventListener("click", deleteToDo);
     li.appendChild(span); // span 요소에 li 추가하기
     li.appendChild(button); //  span 요소에 button 추가하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    toDoInput.value = ""; // 입력 필드 비우기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

클릭된 해당 요소 찾기!

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function deleteToDo(event) {
    console.dir(event.target.parentElement); // 어떤 요소가 클릭되었는지 확인하기
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     const button = document.createElement("button") // button 요소 만들기
     button.innerText = "❌";
     button.addEventListener("click", deleteToDo);
     li.appendChild(span); // span 요소에 li 추가하기
     li.appendChild(button); //  span 요소에 button 추가하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    toDoInput.value = ""; // 입력 필드 비우기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

innerText로 확인하기


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function deleteToDo(event) {
    console.dir(event.target.parentElement.innerText); // 어떤 요소가 클릭되었는지 확인하기
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     const button = document.createElement("button") // button 요소 만들기
     button.innerText = "❌";
     button.addEventListener("click", deleteToDo);
     li.appendChild(span); // span 요소에 li 추가하기
     li.appendChild(button); //  span 요소에 button 추가하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    toDoInput.value = ""; // 입력 필드 비우기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

해당 요소 삭제하기

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function deleteToDo(event) {
    const li = event.target.parentElement.innerText;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     const button = document.createElement("button") // button 요소 만들기
     button.innerText = "❌";
     button.addEventListener("click", deleteToDo);
     li.appendChild(span); // span 요소에 li 추가하기
     li.appendChild(button); //  span 요소에 button 추가하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    toDoInput.value = ""; // 입력 필드 비우기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

2. To Do List에 값 저장하기

local Storage 에 저장하기

newToDo로 toDo가 추가 될 때마다 toDos라는 배열에 추가하기

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const toDos = [];

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     const button = document.createElement("button") // button 요소 만들기
     button.innerText = "❌";
     button.addEventListener("click", deleteToDo);
     li.appendChild(span); // span 요소에 li 추가하기
     li.appendChild(button); //  span 요소에 button 추가하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    toDoInput.value = ""; // 입력 필드 비우기
    toDos.push(newToDo); // 배열에 추가하기
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
}

toDoForm.addEventListener("submit", handleToDoSubmit);

local Storage에는 텍스트만 저장할 수 있음


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const toDos = [];

function saveToDos() {
    localStorage.setItem("todos", toDos);
}

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     const button = document.createElement("button") // button 요소 만들기
     button.innerText = "❌";
     button.addEventListener("click", deleteToDo);
     li.appendChild(span); // span 요소에 li 추가하기
     li.appendChild(button); //  span 요소에 button 추가하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    toDoInput.value = ""; // 입력 필드 비우기
    toDos.push(newToDo); // 배열에 추가하기
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
}

toDoForm.addEventListener("submit", handleToDoSubmit);

기존의 toDos를 화면에 표시하기

local Storage에 배열로 변경하기


JSON.stringify(user) // string으로 만들어줌

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const toDos = [];

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     const button = document.createElement("button") // button 요소 만들기
     button.innerText = "❌";
     button.addEventListener("click", deleteToDo);
     li.appendChild(span); // span 요소에 li 추가하기
     li.appendChild(button); //  span 요소에 button 추가하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    toDoInput.value = ""; // 입력 필드 비우기
    toDos.push(newToDo); // 배열에 추가하기
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    saveToDos(); // local Storage에 저장하기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

배열로 저장된 값을 String으로 바꿔서 가져오기

3. ToDo List 목록 표시하기

local storage에 저장된 값 가져오기

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

const toDos = [];

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
    const span = document.createElement("span"); // span 요소 만들기
    span.innerText = newToDo; // span 내부에 텍스트 설정하기
    const button = document.createElement("button"); // button 요소 만들기
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span); // span을 li에 추가하기
    li.appendChild(button); // button을 li에 추가하기
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    toDoInput.value = ""; // 입력 필드 비우기
    toDos.push(newToDo); // 배열에 추가하기
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    saveToDos(); // localStorage에 저장하기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

// 저장된 todos 불러오기
const saveToDos = localStorage.getItem(TODOS_KEY);

if (saveToDos !== null) {
    const parsedToDos = JSON.parse(saveToDos);
    console.log(parsedToDos);
}

local storage에 저장된 값이 없어서 null 이 뜸

저장된 todos 불러오기


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

const toDos = [];

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
    const span = document.createElement("span"); // span 요소 만들기
    span.innerText = newToDo; // span 내부에 텍스트 설정하기
    const button = document.createElement("button"); // button 요소 만들기
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span); // span을 li에 추가하기
    li.appendChild(button); // button을 li에 추가하기
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    toDoInput.value = ""; // 입력 필드 비우기
    toDos.push(newToDo); // 배열에 추가하기
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    saveToDos(); // localStorage에 저장하기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

// 저장된 todos 불러오기
const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    console.log(parsedToDos);
}

forEach 이용하기

각 item당 1번씩 함수가 실행됨
todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

const toDos = [];

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
    const span = document.createElement("span"); // span 요소 만들기
    span.innerText = newToDo; // span 내부에 텍스트 설정하기
    const button = document.createElement("button"); // button 요소 만들기
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span); // span을 li에 추가하기
    li.appendChild(button); // button을 li에 추가하기
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    toDoInput.value = ""; // 입력 필드 비우기
    toDos.push(newToDo); // 배열에 추가하기
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    saveToDos(); // localStorage에 저장하기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

function sayHello() {
    console.log("Hello");
}

// 저장된 todos 불러오기
const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(sayHello); // array 아이템들에 대해 1개의 함수만 실행
}

목록 조회 성공
todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

const toDos = [];

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
    const span = document.createElement("span"); // span 요소 만들기
    span.innerText = newToDo; // span 내부에 텍스트 설정하기
    const button = document.createElement("button"); // button 요소 만들기
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span); // span을 li에 추가하기
    li.appendChild(button); // button을 li에 추가하기
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    toDoInput.value = ""; // 입력 필드 비우기
    toDos.push(newToDo); // 배열에 추가하기
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    saveToDos(); // localStorage에 저장하기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

// 저장된 todos 불러오기
const savedToDos = localStorage.getItem(TODOS_KEY);

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

중복되면 추가되지 않고 덮어씀
application이 시작될때 toDos 배열이 항상 비어있기 때문
toDos 이전의 복사본을 잊어버리고 비어있는 상태로 만들기 때문

이전 값 복원시켜주기

todo.js
새로운 값이 중복된 값이라도 입력됨


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = []; // 비어있는 배열의 상태로 시작

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
    const span = document.createElement("span"); // span 요소 만들기
    span.innerText = newToDo; // span 내부에 텍스트 설정하기
    const button = document.createElement("button"); // button 요소 만들기
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span); // span을 li에 추가하기
    li.appendChild(button); // button을 li에 추가하기
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    toDoInput.value = ""; // 입력 필드 비우기
    toDos.push(newToDo); // 배열에 추가하기
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    saveToDos(); // localStorage에 저장하기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

// 저장된 todos 불러오기
const savedToDos = localStorage.getItem(TODOS_KEY);

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

4. 삭제 버튼을 누르면 local Storage에도 적용하기

local Storage는 toDos(DB 역할)를 복사 해놓는 곳이기에 toDos와 다름

toDos에게 랜덤한 id 주기


Date.now() // 밀리초(1000분의 1초), 거의 랜덤임

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); 
    const span = document.createElement("span");
    span.innerText = newToDo;
        const button = document.createElement("button"); 
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span); 
    li.appendChild(button); 
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); 
    const newToDo = toDoInput.value; 
    toDoInput.value = ""; 
    const newTodoObj = {
        text: newToDo,
        id: Date.now(),
    }
    toDos.push(newTodoObj); // 배열에 추가하기
    paintToDo(newTodoObj); // 저장된 값을 paintToDo 함수로 전달
    saveToDos(); 
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

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

id를 HTML에 두기

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); 
    li.id = newToDo.id; // io 기져오기
    const span = document.createElement("span"); 
    span.innerText = newToDo.text; // 객체를 text로 나타내기
    const button = document.createElement("button"); 
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span); 
    li.appendChild(button); 
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); 
    const newToDo = toDoInput.value; 
    toDoInput.value = ""; 
    const newTodoObj = {
        text: newToDo,
        id: Date.now(),
    }
    toDos.push(newTodoObj); // 배열에 추가하기
    paintToDo(newTodoObj); // 저장된 값을 paintToDo 함수로 전달
    saveToDos(); 
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

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

어떤 id를 삭제할 것인지 확인하기

삭제하면 해당 id 출력하기

todo.js


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    console.log(li.id);
    li.remove();
}

function paintToDo(newToDo) {
    const li = document.createElement("li"); 
    li.id = newToDo.id; // id 가져오기
    const span = document.createElement("span"); 
    span.innerText = newToDo.text; // 객체를 text로 나타내기
    const button = document.createElement("button"); 
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span); 
    li.appendChild(button); 
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); 
    const newToDo = toDoInput.value; 
    toDoInput.value = ""; 
    const newTodoObj = {
        text: newToDo,
        id: Date.now(),
    }
    toDos.push(newTodoObj); // 배열에 추가하기
    paintToDo(newTodoObj); // 저장된 값을 paintToDo 함수로 전달
    saveToDos(); 
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

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

filter 이용하기

배열의 요소를 조건에 따라 걸러내어 새로운 배열을 만드는 메서드
원래의 배열은 변하지 않고, 조건에 맞는 요소들만으로 구성된 새로운 배열을 반환

각 item마다 filter를 호출하고 true를 반환하면 배열에 유지되고 false를 반환하면 제외됨
JS가 아이템을 보내겠지만 우리는 true를 반환하니 신경안써도 됨

false를 반환하면 제외됨

배열에서 삭제하고 싶으면 해당 item만 false를 반환하고 나머지는 true를 반환하면 됨

해당 id의 item만 false로 반환하여 배열에서 지우기

filter의 매개변수 명은 아무거나 와도 됨
결과는 같음

todo.js
id는 숫자인데 li.id는 string이기에 변형이 필요함


const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];

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

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id)); // 삭제하려는 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);
    li.appendChild(span); 
    li.appendChild(button); 
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); 
    const newToDo = toDoInput.value; 
    toDoInput.value = ""; 
    const newTodoObj = {
        text: newToDo,
        id: Date.now(),
    }
    toDos.push(newTodoObj); 
    paintToDo(newTodoObj); 
    saveToDos(); 
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

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

See more posts

바닐라 JS) 18. To Do List 삭제하고 저장하기

1. To Do List에 값 삭제하기

2. To Do List에 값 저장하기

3. ToDo List 목록 표시하기

4. 삭제 버튼을 누르면 local Storage에도 적용하기

More articles

바닐라 JS) 20. APP 꾸미기

바닐라 JS) 19. 내 위치의 날씨 만들기

바닐라 JS) 17. To Do List 만들고 추가하기

바닐라 JS) 16. 랜덤 배경 이미지 만들기