[jQuery] jQuery empty 메소드를 활용한 스크립트

22 Dec 2023

jQuery

jQuery의 empty 메소드는 HTML 요소의 자식 요소를 모두 제거하는 데 사용됩니다. 이 메소드는 특정 요소의 내부 내용을 지우는 데 유용하며, 다양한 상황에서 동적으로 DOM을 조작하거나 업데이트할 때 유용하게 사용됩니다.

empty 메소드의 구문

$(selector).empty();

empty 메소드는 지정된 선택자에 일치하는 요소의 내부 HTML을 모두 지우고, 빈 요소로 만듭니다.

예제: 동적으로 리스트 아이템 추가 및 제거하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery empty 메소드 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .item {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h2>Shopping List</h2>
  <ul id="shopping-list">
    <li class="item">Milk</li>
    <li class="item">Bread</li>
    <li class="item">Eggs</li>
  </ul>
  <button id="clear-list">Clear List</button>

  <script>
    $(document).ready(function(){
      $("#clear-list").click(function(){
        $("#shopping-list").empty();
      });
    });
  </script>
</body>
</html>

위의 예제는 empty 메소드를 사용하여 쇼핑 목록에서 모든 항목을 제거하는 간단한 스크립트를 보여줍니다. “Clear List” 버튼을 클릭하면 목록에서 모든 항목이 제거됩니다.

empty 메소드를 사용하면 동적으로 DOM을 조작하거나 업데이트하는 과정에서 필요한 HTML 요소의 내부를 간단히 비울 수 있습니다.

결론

empty 메소드는 jQuery를 활용하여 동적인 웹 페이지 개발 시 유용하게 사용될 수 있는 메소드 중 하나입니다. 해당 메소드를 적절히 활용하면 효율적으로 DOM을 제어하고 업데이트할 수 있습니다.

참고 자료:

jQuery Documentation: empty()