자바스크립트 removeChild() 함수 – 자식 요소 제거

`Node.removeChild()` 사용법

removeChild() 함수는
특정 부모 노드 내에서 지정한 자식 노드를 제거합니다.

노드
HTML DOM은 노드의 집합체입니다.
HTML에서 말하는 요소는 "요소 노드"를 의미하며,
텍스트는 "텍스트 노드",
주석은 "주석 노드"라고 말합니다.
요소는 오직 "요소 노드"만을 의미합니다.

removeChild() 함수를 사용하면 원하는 자식 요소를 손쉽게 삭제할 수 있습니다.

구문

parentNode는 자식 노드를 제거할 부모 노드입니다.

매개변수

removeChild() 함수의 매개변수
`childNode`	제거하려는 자식 노드입니다. 노드는 '요소 노드', '텍스트 노드' 등 어떤 형태일 수 있습니다.

removeChild() 함수는 특정 부모 노드 내에서 지정한 자식 노드를 제거하는 역할을 합니다. 즉, 제거하는 노드의 자손 노드가 있을 경우에는 영향을 받지 않지만, 여러 개의 자식 노드 트리를 한 번에 제거하는 것은 불가능합니다.

예시

JavaScript

// 부모 요소와 자식 요소를 가져옵니다.
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// 자식 요소를 부모 요소에서 제거합니다.
parentElement.removeChild(child);

코드 부연설명
getElementById() 함수는 주어진 문자열과 값이 일치하는 id 속성의 값을 가진 요소 객체를 반환합니다.

이 코드에서는 id가 parent인 요소에서 id가 child인 요소를 제거합니다.

반환 값

제거된 자식 노드를 반환합니다.
이 반환된 값을 통해 나중에 해당 노드를 다시 삽입하거나 다른 작업에 사용할 수 있습니다.

이 함수는 노드를 DOM에서 완전히 삭제하는 대신 반환하기 때문에, 필요하면 나중에 다시 사용할 수 있는 유연성을 제공합니다.

예외

removeChild() 함수는 다음의 경우에 예외를 발생시킵니다.

`NotFoundError`

제거하려는 노드(childNode)가 부모 노드(childNode)의 자식이 아닐 때 NotFoundError를 던집니다.

`TypeError`

제거하려는 노드(childNode)가 null일 때 TypeError를 던집니다.

예제

removeChild() 함수를 사용법을 이해할 수 있는 예제입니다.

다음의 HTML이 주어진다면

부모 요소를 알고 있는 경우 지정된 자식 요소를 제거하려면

JavaScript

// 부모 요소와 자식 요소를 가져옵니다.
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// 자식 요소를 부모 요소에서 제거합니다.
parent.removeChild(child);

부모 요소를 지정하지 않고 지정된 자식 요소를 제거하려면

JavaScript

// 자식 요소를 가져옵니다.
const child = document.getElementById("child");

// 부모 요소를 찾습니다.
const parent = childElement.parentElement;

// 자식 요소를 부모 요소에서 제거합니다.
if (parent) { // 부모 요소가 존재하는지 체크합니다.
    parent.removeChild(child);
}

코드 부연설명
parentElement 속성은 현재 노드의 부모 노드를 반환합니다.
부모 요소가 없는 경우, 즉 현재 노드가 문서의 루트 요소인 <html>일 경우 null을 반환합니다.

특정 부모 요소의 모든 자식 요소를 제거하려면

JavaScript

// 모든 자식 요소를 제거할 특정 부모 요소를 가져옵니다.
const parent = document.getElementById("parent");

while (parent.firstElementChild) { // 부모 요소에 첫 번째 자식 요소가 있는 동안 반복합니다.
  parent.removeChild(parent.firstElementChild); // 첫 번째 자식 요소를 제거합니다.
}

코드 부연설명
firstElementChild 속성은 현재 요소의 첫 번째 자식 요소를 반환합니다.
자식 요소가 없을 경우 null을 반환합니다.

코드 부연설명
while 문은 조건식이 참(true)인 동안 코드 블록을 반복 실행하는 반복문입니다.
조건식이 거짓(false)이 되면 반복이 종료됩니다.

`removeChild()` vs. `remove()`

removeChild()와 remove()는 모두 DOM에서 요소를 제거하는 데 사용되지만, 이 두 함수는 몇 가지 중요한 차이점이 있습니다.

비교표

removeChild()와 remove() 함수의 비교
특징	`removeChild()`	`remove`
사용법	특정 부모 노드 내에서 지정한 자식 노드를 제거	자신을 호출한 요소를 DOM에서 제거
부모 노드 필요 여부	필요 있음	필요 없음
반환 값	제거된 자식 노드를 반환	없음
주된 사용	부모 노드를 통해 자식 노드를 삭제하고 싶을 때나, 다른 자식 노드와의 관계를 고려해야 할 때	손쉽게 요소를 호출해서 삭제하고 싶을 때