[jQuery] jQuery empty 메소드를 활용한 버튼 초기화

22 Dec 2023

jQuery

jQuery의 empty 메소드는 특정 요소의 자식 요소들을 제거하는 데 사용됩니다. 이를 활용하여 버튼 요소를 초기화하는 방법에 대해 알아보겠습니다.

1. HTML 구조

우선 초기화할 버튼이 포함된 HTML 구조를 만들어야 합니다. 아래는 간단한 버튼과 해당 버튼을 초기화할 버튼이 포함된 HTML 코드 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 버튼 초기화</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="buttonContainer">
        <button>클릭</button>
    </div>
    <button id="resetButton">초기화</button>

    <script>
        // 초기화 버튼을 눌렀을 때 버튼 초기화 기능을 작성
    </script>
</body>
</html>

2. jQuery를 활용한 버튼 초기화 기능 추가

아래는 resetButton을 눌렀을 때 buttonContainer 안의 버튼을 초기화하는 jQuery 코드입니다.

<script>
$(document).ready(function(){
    $("#resetButton").click(function(){
        $("#buttonContainer").empty();
    });
});
</script>

위 코드에서 $("#resetButton").click()은 초기화 버튼을 클릭했을 때 실행될 코드를 정의합니다. 그리고 $("#buttonContainer").empty()는 해당 컨테이너 내의 모든 요소를 제거하여 버튼을 초기화합니다.

3. 실행 결과

위의 코드를 포함하여 페이지를 브라우저에서 열고 초기화 버튼을 누르면 버튼 컨테이너 내의 버튼이 사라지는 것을 확인할 수 있습니다.

jQuery의 empty 메소드를 활용하여 버튼을 초기화하는 방법을 알아보았습니다. 위 예시를 참고하여 웹 애플리케이션에서 유용하게 활용해보세요.

참고: jQuery empty 메소드