jQuery empty 메소드는 DOM 내부의 모든 자식 요소를 삭제하여 해당 요소를 비웁니다. 이는 특히 리스트나 테이블과 같은 요소의 자식 요소를 모두 지우고 싶을 때 유용합니다. 이번 포스트에서는 jQuery empty 메소드를 이용하여 리스트를 초기화하는 방법에 대해 알아보겠습니다.

empty 메소드 사용법

empty 메소드를 사용하여 특정 요소를 비우는 방법은 매우 간단합니다. 아래의 예제를 살펴보겠습니다.

$("#myList").empty();

위의 코드에서는 id가 “myList”인 요소의 자식 요소를 모두 삭제하는 것을 보여줍니다.

리스트 초기화 예제

간단한 리스트를 초기화하는 예제를 통해 empty 메소드를 실제로 사용하는 방법을 이해해 봅시다.

HTML

<ul id="myList">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<button id="clearList">리스트 지우기</button>

JavaScript (jQuery)

$("#clearList").click(function(){
  $("#myList").empty();
});

위의 JavaScript 코드에서는 “clearList”라는 id를 가진 버튼이 클릭되었을 때, “myList”라는 id를 가진 리스트를 초기화하도록 설정되어 있습니다. 이제 해당 버튼을 클릭하면 리스트의 내용이 모두 삭제될 것입니다.

이렇게 jQuery의 empty 메소드를 사용하여 간단하게 리스트를 초기화하는 방법에 대해 알아보았습니다.

더 많은 정보를 원하시거나 관련하여 궁금한 사항이 있으시면 아래 jQuery 공식 문서를 참고해 보시기 바랍니다.

공식 jQuery 문서

감사합니다!