HTML DOM Element removeChild() 메서드

정의와 사용법

removeChild() 메서드는 요소의 자식 노드를 제거합니다。

이 메서드는 제거된 노드를 Node 객체로 반환합니다；노드가 존재하지 않으면 반환됩니다. null.

알림

자식 노드는 문서 객체 모델(DOM)에서 제거됩니다.

그러나, 반환된 노드를 수정하고 DOM에 다시 삽입할 수 있습니다(아래 예제를 참조하십시오).

또한 참조하십시오：

remove() 메서드

appendChild() 메서드

insertBefore() 메서드

replaceChild() 메서드

childNodes 속성

firstChild 속성

lastChild 속성

firstElementChild 속성

lastElementChild 속성

예제

예제 1

첫 번째 요소를 목록에서 제거하십시오：

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);

삭제 전：

  • Coffee
  • Tea
  • Milk

삭제된 후：

  • Tea
  • Milk

직접 시험해 보세요

예제 2

목록에 자식 노드가 있으면, 첫 번째 노드(인덱스 0)를 제거하십시오：

const list = document.getElementById("myList");
if (list.hasChildNodes()) {
  list.removeChild(list.children[0]);
}

직접 시험해 보세요

예제 3

모든 자식 노드를 목록에서 제거하십시오：

const list = document.getElementById("myList");
while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

직접 시험해 보세요

예제 4

그 원소를 부모 노드에서 제거하십시오：

element.parentNode.removeChild(element);

직접 시험해 보세요

예제 5

그 원소를 부모 요소에서 제거한 후 다시 삽입하십시오：

const element = document.getElementById("myLI");
function removeLi() {
  element.parentNode.removeChild(element);
}
function appendLi() {
  const list = document.getElementById("myList");
  list.appendChild(element);
}

직접 시험해 보세요

예제 6: 알림

삭제된 노드를 같은 문서에 삽입하려면 appendChild() 또는 insertBefore()를 사용하세요.

document.adoptNode() 또는 document.importNode()를 사용하여 다른 문서에 삽입할 수 있습니다.

다음 예제에서는 요소를 부모 요소에서 제거하고 다른 문서에 삽입합니다:

const child = document.getElementById("mySpan");
function remove() {
  child.parentNode.removeChild(child);
}
function insert() {
  const frame = document.getElementsByTagName("IFRAME")[0]
  const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
  const x = document.adoptNode(child);
  h.appendChild(x);
}

직접 시험해 보세요

문법

element.removeChild(node)

또는

node.removeChild(node)

파라미터

파라미터 설명
node 필수. 삭제할 노드(요소)

반환 값

타입 설명
Node

삭제된 노드(요소)

자식 노드가 존재하지 않으면 null입니다.

브라우저 지원

element.removeChild() DOM Level 1 (1998) 기능입니다.

모든 브라우저에서 완전히 지원됩니다:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원