[JavaScript]자식 노드를 제거하는 방법

자식 노드를 제거하는 방법

이번 포스팅은 JavaScript에서 선택한 노드의 자식 노드를 제거할 수 있는 removeChild(), remove() 메서드 사용 방법을 소개합니다.

---

removeChild() 메서드

자식 노드를 제거하려면 removeChild() 메서드에 자식 노드를 전달합니다.

const childNode = parentNode.removeChild(childNode);

parentNode는 선택한 노드이며 removeChild() 메서드에 전달된 childNode는 parentNode의 자식 노드입니다. removeChild() 메서드는 부모 노드와 자식 노드의 관계를 끊으며, 관계가 끊어진 자식 노드를 반환합니다.

 

아래와 같이 반환 결과를 할당하는 변수가 없으면 관계가 끊어진 자식 노드를 메모리에 보관 후 JavaScript GC에 의해 제거됩니다. 

parentNode.removeChild(childNode);

매개변수로 전달된 노드가 parentNode의 자식 노드가 아닌 경우 NotFoundError가 발생하며, null이 전달된 경우에는 TypeError가 발생합니다.

 

아래는 간단한 HTML 마크업 문서입니다.

<div id="content">
  <ul id="ul-list">
    <li>JavaScript</li>
    <li>Svelte</li>
    <li>Angular</li>
  </ul>
</div>

 

아래는 id가 "ul-list"인 HTML 요소의 첫 번째 자식 노드를 removeChild() 메서드를 사용하여 제거하는 JavaScript 코드입니다.

const ulNode = document.getElementById("ul-list");
ulNode.removeChild(ulNode.firstElementChild);

---

remove() 메서드

선택한 노드에서 remove() 메서드를 호출하면 DOM 트리에서 바로 제거합니다.

 

아래는 id가 "ul-list"인 HTML 요소의 첫 번째 자식 노드를 remove() 메서드를 사용하여 제거하는 JavaScript 코드입니다.

const ulNode = document.getElementById("ul-list");
ulNode.firstElementChild.remove();

---

모든 자식 노드를 지우는 replaceChildren() 메서드

선택한 노드의 모든 자식 노드를 지우고 싶은 경우 replaceChildren() 메서드를 호출합니다.

parentNode.replaceChildren();

replaceChildren() 메서드에 매개변수를 전달하지 않으면, 선택한 노드의 자식 노드를 빈 값으로 변경합니다.

 

아래는 id가 "ul-list"인 HTML 요소의 모든 자식 노드를 replaceChildren() 메서드를 사용하여 제거하는 JavaScript 코드입니다.

const ulNode = document.getElementById("ul-list");
ulNode.replaceChildren();

---

정리

• removeChild() 메서드는 부모 노드의 자식 노드를 제거하기 위해 사용합니다.
• removeChild() 메서드의 반환 결과를 할당하는 변수가 존재하는 경우 자식 노드를 메모리에 보관합니다.
• remove() 메서드는 선택한 노드를 바로 제거합니다.
• 모든 자식 노드를 지우고 싶다면 replaceChildren() 메서드에 빈 값을 전달합니다.