js todoList

const todo = document.querySelector("#todo")
const todoInput = todo.querySelector("input");
function putlist(value){
    const list = document.createElement("li");
    const span = document.createElement("span");
    span.innerText=value;
    list.appendChild(span);
    const ul = document.querySelector("#list");
    ul.appendChild(list);
}
function addList(event){
    event.preventDefault();
    const input = todoInput.value;
    todoInput.value="";
    putlist(input);
}
todo.addEventListener("submit",addList);

input을 submit 했을 때 입력한 refresh를 방지하고 입력한 값을 변수에 저장하고 입력창 내용을 지운다.

입력값을 putlist 함수의 인자로 사용해서 <li> 속의 <span> 태그 속에 입력한 내용을 담아서 <ul> 속에 삽입한다.

 

 

생성할 때에 버튼도 같이 추가해서 해당 버튼을 누르면 해당 리스트를 지우게 구현

const todo = document.querySelector("#todo")
const todoInput = todo.querySelector("input");
function pressButton(event){
    const list = (event.target.parentElement);
    list.remove();
}
function putlist(value){
    const list = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText="X";
    span.innerText=value;
    list.appendChild(span);
    list.appendChild(button);
    const ul = document.querySelector("#list");
    ul.appendChild(list);
    button.addEventListener("click",pressButton);
}
function addList(event){
    event.preventDefault();
    const input = todoInput.value;
    todoInput.value="";
    putlist(input);
}
todo.addEventListener("submit",addList);

<li>속에 <button>도 함께 넣어준다.

 

※버튼을 누를때 addList가 실행되는 버그가 발생한 적이 있음 html에서 form의 태그가 ul에까지 포함 돼 있었음.

 

그리고 putlist함수에 addEventListner을 추가해 버튼을 누르면 해당 <li>를 지우는 함수를 만든다.

그 함수에는 해당 버튼을 누를때의 event에서 event.target.parentElement 로 그 버튼에 해당하는 parent를 삭제.

해당 버튼의 list만 삭제할 수 있었다.