[jQuery] 요소 삭제 메서드, remove(), empty()

remove()와 empty() 메서드

remove()와 empty()는 jQuery에서 요소를 삭제하거나 내용을 비우는 데 사용되는 메서드이다. 두 메서드는 비슷하지만 약간 다른 동작을 하므로, 차이를 이해하는 것이 중요하다.

 

remove()

remove()는 선택한 요소를 DOM에서 완전히 제거한다. 요소 자체뿐만 아니라 자식 요소, 이벤트 핸들러, 데이터까지 모두 삭제된다. DOM 트리에서 해당 요소와 모든 관련 정보가 완전히 사라진다.

$('#myDiv').remove();  // #myDiv 요소를 완전히 제거

 

예시

#myDiv와 그 안의 모든 내용(p 태그 등)이 DOM에서 제거된다.

<div id="myDiv">
  <p>여기 있는 텍스트</p>
</div>

<script>
  $('#myDiv').remove(); // #myDiv 요소가 완전히 삭제됨
</script>

---

 

 

empty()

empty()는 선택한 요소의 자식 요소들만 삭제한다. 요소 자체는 남아 있고, 내용물만 비워지며 자식 요소들만 제거된다. 이벤트 핸들러나 데이터는 제거되지 않는다.

$('#myDiv').empty();  // #myDiv의 자식 요소들만 제거

예시

#myDiv는 남아 있지만, 그 안의 모든 자식 요소인 <p> 태그들은 삭제된다. 따라서 #myDiv는 비어있는 상태가 된다.

<div id="myDiv">
  <p>첫 번째 문장</p>
  <p>두 번째 문장</p>
</div>

<script>
  $('#myDiv').empty(); // #myDiv의 자식 요소들만 제거됨
</script>

 

 

---

 

 

remove()와 empty() 비교

메서드	동작
remove(0	- 선택한 요소를 DOM에서 완전히 제거 - 요소와 자식, 이벤트 핸들러, 데이터까지 모두 삭제 모든 것 삭제
empty()	- 선택한 요소의 자식만 삭제 - 요소는 남아 있고, 자식 요소만 비워짐

remove()는 사용자가 더 이상 필요 없는 콘텐츠를 완전히 제거하고자 할 때 사용하고, empty()는 요소의 내용만 비우고 구조는 그대로 두고자 할 때 사용한다. 필요에 따라, DOM에서 요소를 완전히 삭제할지 아니면 내용만 비울지 선택해서 사용할 수 있다.