[jQuery] jQuery empty 메소드를 사용하여 이미지 요소 초기화

22 Dec 2023

jQuery

jQuery의 empty 메소드는 선택한 요소의 모든 하위 요소를 제거하는 데 사용됩니다. 예를 들어, 이미지 요소를 초기화할 때 유용하게 활용될 수 있습니다.

이미지 요소 초기화 예제

다음은 이미지 요소를 초기화하는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <title>이미지 초기화 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#clearBtn").click(function(){
        $("#imageContainer").empty();
      });
    });
  </script>
</head>
<body>

<div id="imageContainer">
  <img src="image1.jpg" alt="이미지 1">
  <img src="image2.jpg" alt="이미지 2">
</div>

<button id="clearBtn">이미지 초기화</button>

</body>
</html>

위의 예제에서는 empty 메소드를 사용하여 imageContainer 안의 모든 이미지 요소를 제거하는 버튼을 만듭니다. 페이지를 열고 버튼을 클릭하면 이미지가 초기화됩니다.

이 예제에서는 이미지 요소를 제거하지만, 다른 상황에서 필요에 따라 다양한 요소를 초기화하는 데 활용할 수 있습니다.

결론

empty 메소드를 사용하여 jQuery를 활용하면 선택한 요소의 모든 하위 요소를 간편하게 제거할 수 있습니다. 이를 활용하여 이미지 요소뿐만 아니라 다양한 요소를 초기화할 수 있습니다.

참고 자료

jQuery Documentation