2022.07.18 버튼을 눌러 삭제하는 기능

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));
}

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.addEventListener("click",deleteTodo)
    button.innerText = "X"                                                                            
    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);
}

 

---

버튼을 눌러서 리스트 속 item을 삭제하는 기능을 만들었다.

생각해보면 간단한데 그 속은 전혀 아니다.

일단 중요하게 생각해야할것.

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

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

}

 삭제하는 기능 안에 필터 기능. 말 그대로 필터해서 보여준다.

toDo에 아이디를 그전에 부여했었는데 클릭했을때 li(리스트)눌렀을때 부여된 아이디가 맞지않은 것을 모두 보여준다는 뜻.

parseInt 는 스트링->숫자로 변환해주는 것.(아이디가 스트링으로 표기되어 기능이 제대로 되지않기에 숫자로 값을 변환해줌)