[jQuery] jQuery empty 메소드를 사용하여 특정 부모 요소의 자식 삭제

22 Dec 2023

jQuery

jQuery의 empty() 메소드는 특정 부모 요소의 모든 자식 요소를 삭제하는 데 사용됩니다. 이는 특정 요소의 하위 요소를 일괄적으로 제거하고 싶을 때 유용합니다.

empty 메소드의 사용법

다음은 empty() 메소드를 사용하여 특정 부모 요소의 자식을 모두 삭제하는 간단한 예제입니다.

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

위의 예제에서 #parentElement는 자식 요소를 삭제하려는 부모 요소의 CSS 선택자입니다. empty() 메소드를 호출하면 해당 부모 요소의 모든 자식 요소가 제거됩니다.

예제

아래는 empty() 메소드를 사용하여 특정 부모 요소의 자식을 삭제하는 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery empty 메소드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#clearButton").on("click", function(){
        $("#myList").empty();
      });
    });
  </script>
</head>
<body>

<h2>자식 요소 삭제 예제</h2>

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

<button id="clearButton">삭제</button>

</body>
</html>

위의 예제는 “삭제” 버튼을 클릭하면 #myList의 모든 자식 요소인 <li>가 삭제됩니다.

empty() 메소드는 jQuery를 통해 DOM 조작을 수행할 때 유용한 기능 중 하나입니다. 필요에 따라 이 메소드를 사용하여 요소의 자식 요소를 효과적으로 제거할 수 있습니다.

참고 자료

jQuery 공식 문서: jQuery.empty()

이상으로 jQuery의 empty() 메소드를 사용하여 특정 부모 요소의 자식을 삭제하는 방법에 대해 알아보았습니다.