[JacaScript] 자바스크립트에서 요소를 동적으로 삭제하기

139_자바스크립트에서 요소를 동적으로 삭제하기

[적용]

• 요소를 동적으로 삭제하고 싶을 때

---

[문법]

메소드	의미	반환
부모노드.removeChild(자식노드)	부모 요소에서 자식 요소 제거	제거된 요소(Element)

---

[내용]

removeChild()는 부모 요소에서 자식 요소를 제거한다.

#parent 요소 내 #child 요소를 3초 후 삭제하는 예시를 확인해 보자.

 

HTML                                                                                                                                                              index.html

<div id="parent">
  <div id="child">제거된 요소</div>
</div>

JavaScript                                                                                                                                                          main.js

// 3초 후 처리를 실행
setIimeout(() => {
  const parentElement = document.querySelector('#parent');
  const childElement = document.querySelector('#child');
  // #child 요소 제거
  parentElement.revomeChild(childElement);
}, 3000);

 

실행결과

3초 후 자식 요소가 제거된다.

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김