IT/Javascript

[Javascript] 자식 노드 모두 삭제하기

hi.anna 2022. 7. 22. 06:55

 

Javascript를 사용하여

특정 노드의 모든 자식 노드를 삭제하는 방법입니다.

 

  1. innerHTML, textContent
  2. replaceChildren()
  3. removeChild(), remove()

 

 

1. innerHTML, textContent

innerHTML

<div id='parent'>
  <div>자식노드1</div>
  <div>자식노드2</div>
</div>
<input type='button' value='자식노드 삭제' onclick='remove_children()' />
function remove_children() {
  // 부모 노드 선택
  const parent = document.getElementById('parent');

  // 자식 노드 삭제
  parent.innerHTML = "";
}

parent.innerHTML = '';

innerHTML 속성을 이용하면

element 안에 포함된 HTML 또는 XML을 읽어오거나 설정할 수 있습니다.

여기서는, 

parent 노드 안의 HTML을 ''(공백)으로 설정하여

기존의 자식 노드를 삭제하였습니다.

하지만, 이 방법은 성능에 불리합니다.

innerHTML은 텍스트 HTML을 파싱하기 위해 파서를 호출하기 때문입니다.

(비록, 우리의 코드는 빈 공백을 입력하고 있지만...)

그래서, 성능면에서 innerHTML 보다는 textContent가 더 낫습니다.

 

 

textContent

<div id='parent'>
  <div>자식노드1</div>
  <div>자식노드2</div>
</div>
<input type='button' value='자식노드 삭제' onclick='remove_children()' />
function remove_children() {
  // 부모 노드 선택
  const parent = document.getElementById('parent');

  // 자식 노드 삭제
  parent.textContent = "";
}

parent.textContent = '';

textContent 속성은,

노드와 자식 노드의 text 컨텐츠를 표현합니다.

여기서는 parent 노드의 text 컨텐츠를 빈 공백으로 세팅하여,

기존에 가지고 있던 자식 노드를 모두 삭제하였습니다.

 

 

 

2. replaceChildren()

replaceChildren()

<div id='parent'>
  <div>자식노드1</div>
  <div>자식노드2</div>
</div>
<input type='button' value='자식노드 삭제' onclick='remove_children()' />
function remove_children() {
  // 부모 노드 선택
  const parent = document.getElementById('parent');

  // 자식 노드 삭제
  parent.replaceChildren();
}

parent.replaceChildren();

replaceChildren() 함수는, 이름에서도 알 수 있듯이

자식 노드를 파라미터로 입력받은 파라미터의 노드로 교체해주는 함수입니다.

그런데, 위 예제와 같이 파라미터로 아무것도 전달되지 않으면,

모든 자식 노드가 삭제됩니다.

 

 

 

3. removeChild(), remove()

removeChild()

<div id='parent'>
  <div>자식노드1</div>
  <div>자식노드2</div>
</div>
<input type='button' value='자식노드 삭제' onclick='remove_children()' />
function remove_children() {
  // 부모 노드 선택
  const parent = document.getElementById('parent');

  // 자식 노드 삭제
  while(parent.firstChild)  {
    parent.removeChild(parent.firstChild);
  }
}

while(parent.firstChild) {

   parent.removeChild(parent.firstChild);

}

removeChild() 함수는,

파라미터로 전달받은 자식 노드를 삭제합니다.

이때, 파라미터로 전달받은 노드는 parent의 자식 노드여야 합니다.

 

여기서는

firstChild 노드가 삭제될때까지

반복문을 수행하여 자식 노드를 삭제합니다.

 

 

remove()

<div id='parent'>
  <div>자식노드1</div>
  <div>자식노드2</div>
</div>
<input type='button' value='자식노드 삭제' onclick='remove_children()' />
function remove_children() {
  // 부모 노드 선택
  const parent = document.getElementById('parent');

  // 자식 노드 삭제
  while(parent.firstChild)  {
    parent.firstChild.remove()
  }
}

while(parent.firstChild)  {

   parent.firstChild.remove();

}

removeChild() 예제와 마찬가지로,

firstChild 노드가 삭제될 때까지 반복문을 수행하여 노드를 삭제합니다.

여기서는 remove() 함수를 사용하였습니다.

remove() 함수는 선택한 노드를 삭제합니다.

 

 

 

Javascript를 이용하여 

모든 자식노드를 삭제하는 방법을 알아보았습니다.

 

 

 

반응형