입력한 List삭제하기

삭제버튼 만들기

function paintToDo(newTodo){
    const li = document.createElement('li'); //li태그 생성
    const span = document.createElement('span'); //span태그 생성
    span.innerText=newTodo;

/////////////////삭제버튼코드//////////////
    const button = document.createElement('button');
    button.innerText='❌';
   
///////////////삭제이벤트연결///////////////
    button.addEventListener("click", deleteToDo) //클릭이벤트 생성
        
    li.appendChild(span); //<li><span></spam></li>

//////////////////////버튼생성////////////////////
    li.appendChild(button);

    toDoList.appendChild(li);

 
}

• createElement로 button을 생성하는 변수를 만든다.
• innerText를 이용해 버튼안에 출력될 문자열을 정한다.
• 이제 이버튼을 addEventListner를 활용해 이벤트를 연결한다, 함수명() 을 넣으면 이벤트 자동실행 ()를 넣지 않고 이름만 넣으면 클릭해야 실행된다.
• appendChild를 활용혀 li의 자식태그로 button을 생성한다

삭제 이벤트 만들기

function deleteToDo(even){
    const li = event.target.parentElement//클릭한 현재 이벤트의 타겟의 부모태그속성
    li.remove();
}

• 방금 함수에서 이벤트 연결시에 썼던 함수명으로 삭제 이벤트를 만든다.
• 클릭한 버튼만 정확하게 이벤트로 활용하기위해 event.target을 설정한다, 그러면 클릭한 이벤트의 타겟(버튼)만 설정되며 parentElement로 버튼의 부모태그가 선택된다
  • 이경우 button의 부모태그는 li태그이다,
• 부모태그에 remove() 이벤트를 설정하면 li태그가 통째로 삭제된다.