7- 오늘할일 list 생성하고 지우기

const todoForm = document.getElementById("todo-form");

const todoList = document.getElementById("todo-list");

const todoInput = document.querySelector("#todo-form input")

const todos =[];

 

1) 할일 add하기

 

function addTodo(newTodo) {

const li = document.createElement("li");

const span = document.createElement("span");

span.innerText = newTodo;

const button = document.createElement("button");

button.innerText = "❎";

li.appendChild(span);

li.appendChild(button);

todoList.appendChild(li);

todos.push(newTodo); /**local storage저장용 */

saveTodos();

button.addEventListener("click",deleteTodo);

}

 

 

createElement - 말그대로 element를 만들어줌

appendchild -  이것도 말그대로 child를 만들어주는데 그냥 태그를 쓰는게 아니라  이런식으로

var p = document.createElement("p");
document.body.appendChild(p);

위에서 이미 만들어놓은 todoList (ul 태그) 안에 li.append로 span과 button을 만들어주면됨

 

2)/**todo form을 submit했을 때 event */

function todoSubmit(event) {

event.preventDefault();

const newTodo = todoInput.value;

todoInput.value =""; /**이렇게 해도 newTodo에 저장된 value값은 안 바뀜 */

addTodo(newTodo);

}

todoForm.addEventListener("submit",todoSubmit);

 

일단 default(새로고침)하는거 막고 input 창에 입력한 값이 value로 저장되니까 이거를 변수로 지정해놓음

*여기서 새로고침을 막았기 때문에 엔터를눌러도 입력값이 그대로 남아있기 때문에 "" 이렇게 해줘야 새로고침 된것처럼 보임

이렇게 해도 value를 이미 newTodo에 넣어놨기 때문에 newTodo는 변함 없음

 

3)**button 클릭하면 해당 li항목 지워지는 함수 */

function deleteTodo(event){

const delList = event.target.parentElement;

delList.remove();

/**event.target을 하면 어떤 버튼을 클릭했는지 알 수 있음 -

여기서 그 부모 태그(li)에 접근해서 그 태그 자체를 삭제해버려야지 리스트를 지울 수 있음 */

}

 

window에서 default로 기본 설정에 대한 정보를 줌 - 이걸 인수 event로 지정해놔서 어떤 설정이 되었는지 확인이 가능함

여기서 내가 어떤 버튼을 눌렀는지를 확인해야 해당 li를 지워버릴 수 있는데 그걸 해주는게 target / target된 버튼의 부모요소(li)를 찾아서 remove해주면 끝