[JS] 자식 Node 모두 삭제: removeChild()

가끔 자식 NodeList를 모두 삭제해야할 경우가 있을 때 사용할 수 있는 방법이다!

remove() 혹은 removeChild() 메서드를 사용할 수 있는데 

remove()의 경우는 IE에서 지원이 되지않는다 ㅠㅠ

 

const parent = document.getElementById('parent');

//removeChild()
//자식 노드가 존재하면 == NodeList.length > 0
while(parent.firstChild){
    parent.removeChild(parent.firstChild);
}

//remove()
while(parent.firstChild){
    parent.firstChild.remove();
}

//+) hasChildNodes();
while(parent.hasChilNodes()){
    ...
}

parent.firstChild로 자식 노드 유무를 확인할 수도 있고,

parent.hasChildNodes() 메서드로 true / false를 확인 할 수 있다.

 

 

그리고 안타깝게도 ,,!! removeAll() 이 없다는 것 !

따로 함수를 정의해서 사용해 줄 수 있다!

 

function removeAllChild() {
  while(parent.firstChild){
      parent.removeChild(parent.firstChild);
  }  
}