[JavaScript] JS로 크롬 만들기 10. JS로 HTML element 삭제 : event.target & parentElement

TOC

• JS element 삭제
  • delete 버튼 생성
  • event.target과 parentElement
  • remove()
  • 관련 JS 코드

JS element 삭제

delete 버튼 생성

function paintToDo(newTodo) {  
  const button = document.createElement("button");   // document에 button 만들기
  button.innerText = "❌";                          // button에 'X' 표시 text 넣기
  button.addEventListener("click", deleteToDo);      // button클릭 시 deleteToDo 함수 실행
  li.appendChild(button);                            // li에 button 넣기
  toDoList.appendChild(li);                          // toDoList ul에 li 넣기
}

• 삭제 버튼에 대한 코드만 남겼다.
• 이전에 newTodo를 span으로 남긴 이유는 delete 버튼과 한 라인에 둘 예정이었기 때문
• button도 li에 append해주고, li를 toDoList ul에 append한다.

event.target과 parentElement

문제 상황 : 어떤 삭제 버튼을 누를 때, 어떤 li의 삭제 버튼인지 알 수가 없다!

해결 : click event에 대한 자세한 정보를 'event'에서 얻자!

• addEventListener("click", function) 에서 click에 대한 event 정보를 알 수 있다.

• 우리가 클릭한 button의 parentElement인 li를 알 수 있다.

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

• event.target : 클릭된 HTML element

• parentElement : event.target의 부모 element

• 위의 코드를 함수에 넣고 HTML 화면에서 삭제 버튼을 누르면, console에 삭제를 누른 버튼의 li element를 확인할 수 있다.

remove()

저장된 element 변수를 HTML에서 실제로 제거할 때 사용

function deleteToDo(event) {
  const li = event.target.parentElement;             // 삭제해야 하는 li를 parentElement를 이용해 조회/저장
  li.remove();                                       // parentElement 제거
}

• button의 부모 element를 알았으니, 이를 제거하면 되겠다.
• 변수에 지정하고 이를 remove() method로 제거하면 된다.

관련 JS 코드

// js/todo.js

function deleteToDo(event) {
  const li = event.target.parentElement;             // 삭제해야 하는 li를 parentElement를 이용해 조회/저장
  li.remove();                                       // parentElement 제거
}


function paintToDo(newTodo) {
  const li =  document.createElement("li");          // document에 li 만들기
  const span = document.createElement("span");       // document에 span 만들기       
  const button = document.createElement("button");   // document에 button 만들기
  span.innerText = newTodo;                          // span에 newTodo text 넣기
  button.innerText = "❌";                          // button에 'X' 표시 text 넣기
  button.addEventListener("click", deleteToDo);      // button클릭 시 deleteToDo 함수 실행
  li.appendChild(span);                              // li에 span을 넣기
  li.appendChild(button);                            // li에 button 넣기
  toDoList.appendChild(li);                          // toDoList ul에 li 넣기
}