[jQuery] jQuery empty 메소드를 사용하여 특정 태그의 자식 요소 초기화

22 Dec 2023

jQuery

jQuery의 empty 메소드는 선택한 요소의 모든 자식 요소를 제거하는 데 유용합니다. 이를 통해 특정 태그의 자식 요소를 간단히 초기화하고 새로운 내용을 추가할 수 있습니다.

사용법

우선, 제거하려는 부모 요소를 선택합니다. 예를 들어, 아이디가 “myElement”인 div 요소의 자식 요소를 초기화하려면 다음과 같이 작성합니다.

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

위 코드는 아이디가 “myElement”인 div 요소의 모든 자식 요소를 제거합니다.

예제

다음은 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").click(function(){
        $("#myDiv").empty();
      });
    });
  </script>
</head>
<body>

<div id="myDiv">
  <p>첫 번째 단락</p>
  <p>두 번째 단락</p>
</div>

<button id="clearButton">내용 지우기</button>

</body>
</html>

이 예제는 “내용 지우기” 버튼을 클릭하면 id가 “myDiv”인 div 요소의 자식 요소인 모든 p 태그가 제거됩니다.

결론

jQuery의 empty 메소드는 선택한 요소의 자식 요소를 간편하게 제거할 수 있어 매우 편리합니다. 이를 통해 동적으로 변경되는 웹 페이지의 요소를 빠르게 갱신할 수 있습니다.

더 자세한 내용은 jQuery empty 메소드 공식 문서를 참조하십시오.