Javascript - 자식 노드 모두 제거

Javascripthtml

Javascript로 특정 노드의 모든 자식 노드를 삭제하는 방법에 대해서 알아보겠습니다.

1. innerHTML으로 자식 노드 삭제

HTML

아래 HTML에서 parent 노드는 3개의 자식 노드를 갖고 있습니다. 버튼을 누르면 Javascript의 함수를 호출합니다.

<div id="parent">
  <p>첫 번째 자식</p>
  <p>두 번째 자식</p>
  <p>세 번째 자식</p>
</div>

<input type="button" value="모든 자식 노드 삭제" onclick="removeChildren()" />

Javascript

자바스크립트에서 함수가 호출되면 parent 노드를 찾고 innerHTML에 빈 값을 입력하여 모든 자식 노드를 삭제합니다.

function removeChildren() {
  const parentElement = document.getElementById("parent");
  parentElement.innerHTML = "";
}

innerHTML = ""를 입력 후, HTML을 확인해보면 아래와 같이 하위 노드들이 모두 제거된 상태로 보입니다.

<div id="parent"></div>

<input type="button" value="모든 자식 노드 삭제" onclick="removeChildren()">

Output:

2. removeChild()로 자식 노드 삭제

HTML

아래 HTML에서 parent 노드는 3개의 자식 노드를 갖고 있습니다. 버튼을 누르면 Javascript의 함수를 호출합니다.

<div id="parent">
  <p>첫 번째 자식</p>
  <p>두 번째 자식</p>
  <p>세 번째 자식</p>
</div>

<input type="button" value="모든 자식 노드 삭제" onclick="removeChildren()" />

Javascript

Javascript에서는 parent 노드를 찾고, while문을 이용하여 자식 노드를 모두 삭제

  • parentElement.firstChild는 첫번째 자식 노드를 가리키며, 자식이 없으면 false로 되어 while이 종료
  • parent.removeChild(node)는 parent 노드에서 node를 삭제
function removeChildren() {
  const parentElement = document.getElementById("parent");
  while (parentElement.firstChild) {
    parentElement.removeChild(parentElement.firstChild);
  }
}

Output:

3. querySelectorAll()으로 자식 노드 삭제

HTML

아래 HTML에서 parent 노드는 3개의 자식 노드를 갖고 있습니다. 버튼을 누르면 Javascript의 함수를 호출합니다.

<div id="parent">
  <p>첫 번째 자식</p>
  <p>두 번째 자식</p>
  <p>세 번째 자식</p>
</div>

<input type="button" value="모든 자식 노드 삭제" onclick="removeChildren()" />

Javascript

Javascript에서는 parent 노드를 찾고, querySelectorAll("*")으로 하위의 모든 노드들을 찾습니다. 그리고 반복문으로 모든 노드를 제거합니다.

  • forEach(node => node.remove())으로 하위 노드들을 탐색하면서 모두 삭제
  • parent.querySelectorAll("*")는 parent의 모든 하위 노드들 리턴
function removeChildren() {
  const parentElement = document.getElementById("parent");
  const childNodes = parentElement.querySelectorAll("*");
  childNodes.forEach(node => node.remove());
}

Output:

Loading script...

Related Posts

codechachaCopyright ©2019 codechacha