[jQuery] jQuery empty 메소드를 사용하여 각 요소 삭제

22 Dec 2023

jQuery를 사용하면 DOM 요소를 쉽게 조작할 수 있습니다. 여기서는 jQuery의 empty 메소드를 사용하여 DOM 요소를 비우는 방법에 대해 살펴봅니다.

empty 메소드란

empty 메소드는 선택한 요소의 자식 요소들을 모두 제거합니다. 이 메소드를 사용하면 부모 요소를 유지한 채 자식 요소들을 삭제할 수 있습니다.

다음은 empty 메소드를 사용하여 각 요소를 삭제하는 간단한 예제입니다.

$(document).ready(function(){
  $("#myElement").empty();
});

위 예제에서는 id가 “myElement”인 요소의 모든 자식 요소들이 삭제됩니다.

만약 다음과 같이 HTML이 있다고 가정해봅시다.

<div id="myElement">
  <p>첫 번째 문단</p>
  <p>두 번째 문단</p>
</div>

위 코드를 사용하여 다음과 같이 JavaScript를 작성할 수 있습니다.

$(document).ready(function(){
  $("#myElement").empty();
});

이제 해당 요소는 다음과 같이 비어 있게 됩니다.

<div id="myElement"></div>

jQuery의 empty 메소드는 선택한 요소의 자식 요소들을 비우는 데 유용합니다. 이를 통해 요소를 유지한 채 내용을 간편하게 제거할 수 있습니다.