jQuery의 empty 메소드는 선택한 요소의 자식 요소들을 모두 제거하는 기능을 제공합니다. 이를 통해 선택한 요소를 비워두고, 필요한 경우 새로운 내용을 채울 수 있습니다.

empty 메소드 사용 예시

다음은 empty 메소드의 간단한 사용 예시입니다.

$(document).ready(function(){
    $("#myDiv").empty();
});

위의 코드는 id가 “myDiv”인 요소의 모든 자식 요소를 제거합니다.

동작 방식

empty 메소드는 선택한 요소의 모든 자식 요소를 제거합니다. 이 과정에서 자식 요소들의 이벤트 핸들러, 데이터, DOM 상태 등을 완전히 제거하므로 주의해야 합니다.

사용 예시

다음은 empty 메소드를 사용하여 일부 요소의 내용을 비우는 예시입니다.

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

<button id="clearBtn">내용 비우기</button>

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

위의 예시에서는 버튼이 클릭되면 id가 “myDiv”인 요소의 내용이 모두 비워집니다.

참고 자료

• jQuery 공식 문서: empty 메소드

여기까지 jQuery의 empty 메소드에 대한 간단한 설명이었습니다. 함께 공부해보시길 바랍니다!