removeChild 자바스크립트 요소 제거

by

원본: https://www.javatpoint.com/javascript-removechild

removeChild() 메소드는 자식 노드를 제거하고 제거된 노드를 리턴합니다. 이 포스트에서는 부모 노드에서 자식 노드를 제거하는 방법을 알아보고 이를 사용하는 몇 가지 예제를 살펴보겠습니다.

자바스크립트 removeChild

부모 노드에서 자식 노드를 제거하려면 removeChild() 메소드를 사용할 수 있습니다. 이 메소드는 노드의 자식 요소를 제거하는 데도 사용합니다.

문법

const removedNode = parentNode.removeChild(childNode);

위의 구문에서 매개변수로 전달하는 childNode는 부모 노드에서 제거하고자하는 요소를 나타냅니다.

여기서 childNode가 parentNode의 자식 노드가 아닌 경우에는 예외가 발생합니다. childNode가 parentNode의 자식이라면 removeChild() 메소드는 해당 childNode를 DOM에서 제거하고 그 객체를 리턴하지만 메모리에서는 지우지 않고 그대로 유지합니다.

따라서 지정된 childNode를 DOM에서 지우는 것 뿐만 아니라 메모리에 유지하지 않고 완전히 제거하려면 아래 구문을 사용하면 됩니다:

parentNode.removeChild(childNode);

위의 구문을 보면 제거된 childNode를 어떤 변수에도 저장하지 않은 것을 볼 수 있습니다. 이는 제거된 요소가 메모리 어디에도 저장되지 않았음을 의미합니다. 사실 자바스크립트의 가비지 컬렉터가 메모리 정리를 해야만 실질적으로 메모리에서 지워집니다.

removeChild 예제

이제 요소 제거 방법을 이해하기 위한 몇 가지 예제를 살펴보겠습니다.

예제 1: 요소 제거

<html>

<body>
  <ul id="id_1">
    <li>John</li>
    <li>Rone</li>
    <li>Jessy</li>
    <li>Daisy</li>
    <li>Harry</li>
  </ul>

  <script>
    const getChild = document.getElementById("id_1");
    getChild.removeChild(getChild.childNodes[1]);
  </script>
</body>

</html>

위의 코드를 실행하면 다음과 같은 결과를 볼 수 있습니다:

removeChild 사용 예제

코드 설명

  • HTML 코드에는 몇 개의 아이템을 가지는 순서가 없는 목록(<ul>)이 있습니다. 이 목록의 id는 “id_1” 입니다.
  • 스크립트 부분에서는 getElementById() 메소드를 통해 <ul> 요소를 가져왔습니다.
  • 코드에서 “getChild” 변수는 parentNode가 되고 childNodes[1]이 제거하려는 자식 요소라는 것을 알 수 있습니다.
  • removeChild() 메소드는 childNodes[1]을 찾아 목록에서 제거하고 이 제거된 요소를 리턴합니다.
  • 만일 매개변수로 전달한 항목이 목록에 없었다면 아이템을 찾을 수 없다는 예외가 발생했을 것 입니다.

예제 2: 마지막 요소 제거

<!DOCTYPE html>
<html>

<body>
  <ul id="id_2">
    <li>Ready</li>
    <li>Steady</li>
    <li>Go</li>
  </ul>

<script>
    let getChild = document.getElementById('id_2');
    getChild.removeChild(getChild.lastElementChild);
  </script>
</body>

</html>

예제 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다:

마지막 요소 제거 예제

코드 설명

  • 위의 코드에서는 순서가 없는 목록과 세 개의 아이템이 있습니다.
  • 또한 <ul> 요소에 “id = id_2″를 지정해 스크립트에서 요소를 가져올 수 있도록 했습니다.
  • 스크립트 부분에서는 목록 요소의 lastElementChild 속성을 사용하여 마지막 항목을 지우도록 했습니다.

예제 3: 모든 노드 제거

특정 노드의 모든 자식 노드를 지우려면 다음과 같은 몇 가지 방법이 있습니다.

모든 노드 제거 방법 1

다음의 단계에 따라 특정 노드의 모든 하위 노드를 제거할 수 있습니다:

  1. firstChild 속성을 사용해 부모 요소의 첫 번째 노드를 가져옵니다.
  2. 이 firstChild 값이 없어질 때 까지 루프를 돌며 계속 firstChild를 제거합니다.
let getChild = document.getElementById('id_1');
while (getChild.firstChild) {
  getChild.removeChild(getChild.firstChild);
}

모든 노드 제거 방법 2

또 다른 방법으로 innerHTML = “”, 즉 빈 문자열을 innerHTML 속성에 할당하는 것 입니다. 스크립트는 다음과 같습니다.

let getChild = document.getElementById('id_1');
getChild.innerHTML = '';

innerHTML에 빈 문자열을 할당하는 방법은 요소의 모든 자식 노드를 제거하는 간단한 방법이긴 하지만 사용하지 않는 것이 바람직합니다.

removeChild 정리

이 포스트에서는 부모 노드에서 자식 노드를 제거하는 방법을 알아봤습니다. 또한 여러 가지 예제를 통해 임의의 자식 노드 제거, 마지막 노드 제거, 모든 노드 제거 방법을 살펴봤습니다.

관련 글