jQuery의 empty 메소드는 선택한 요소의 자식 요소들을 모두 제거하는 데 사용됩니다. 이를 사용하여 DOM 요소를 비우고 새로운 내용을 삽입하거나 요소를 초기화할 수 있습니다.

예시 1: 요소의 자식 요소들 비우기

다음은 empty 메소드를 사용하여 container 요소의 모든 자식 요소들을 비우는 예시입니다.

$(document).ready(function() {
    $("#emptyButton").click(function() {
        $("#container").empty();
    });
});

HTML:

<div id="container">
    <p>내용을 비우려면 버튼을 클릭하세요.</p>
    <button id="emptyButton">비우기</button>
</div>

위의 예시에서는 버튼이 클릭되면 container 요소의 자식 요소들이 empty 메소드를 통해 모두 제거됩니다.

예시 2: 새로운 내용 삽입하기

다음은 empty 메소드를 사용하여 요소를 비우고 새로운 내용을 삽입하는 예시입니다.

$(document).ready(function() {
    $("#replaceButton").click(function() {
        $("#container").empty();
        $("#container").append("<p>새로운 내용을 추가합니다.</p>");
    });
});

HTML:

<div id="container">
    <p>이전 내용입니다.</p>
    <button id="replaceButton">내용 교체</button>
</div>

위의 예시에서는 버튼이 클릭되면 container 요소의 내용이 empty 메소드로 제거되고, 새로운 p 요소가 삽입됩니다.

empty 메소드를 효과적으로 활용하여 DOM 요소의 자식 요소들을 비우고 필요한 작업을 수행할 수 있습니다.

더 자세한 내용은 jQuery 공식 문서를 참고하십시오.