[jQuery] 제이쿼리 empty 함수 사용 방법 알아보기

 

 

안녕하세요!

오늘은 jQuery의 empty 함수에 대해 소개하려고 합니다. 지난번에 다뤘던 remove 함수와 유사하지만, DOM 요소를 다루는 데에 있어서 차이점이 있습니다.

empty 함수는 jQuery를 사용하는 웹 개발에서 자주 활용되며, UI 업데이트나 동적인 요소 제거를 다룰 때 유용합니다. remove 함수가 특정 DOM 요소를 완전히 삭제하는 데 중점을 두는 반면, empty 함수는 선택한 요소의 모든 자식 요소들을 삭제하는 데 중점이 있습니다.

예를 들어, 특정 컨테이너 요소의 내용을 모두 지우고 싶을 때 empty 함수를 사용하면 됩니다. 이를 통해 해당 요소의 자식 요소들만 제거하고 컨테이너 요소 자체는 유지할 수 있습니다.

이번 블로그 포스팅에서는 empty 함수의 활용법과 remove 함수와의 차이점을 자세히 다뤄보겠습니다. jQuery를 사용하여 웹 페이지의 내용을 동적으로 조작하는 다양한 방법 중에서도 empty 함수의 활용은 매우 중요하며, 웹 애플리케이션 개발 시 유용한 기능 중 하나입니다.

 

---

empty

empty 함수는 jQuery를 사용하여 선택한 요소의 모든 자식 요소들을 제거하는 메서드입니다. 즉, 해당 요소의 내용을 비우는 역할을 합니다. 주로 동적으로 웹 페이지의 내용을 업데이트하거나 초기화할 때 사용됩니다.

 

 

예시 코드

$(선택자).empty();

위에서 '선택자'는 내용을 비우고자 하는 부모 요소를 가리키는 jQuery 선택자입니다. empty 함수를 호출하면 해당 요소의 모든 자식 요소들이 제거됩니다.

 

 

HTML 예시 코드

<div id="myDiv">
    <p>이 요소는 비워질 것입니다.</p>
    <span>또 다른 내용</span>
</div>

$("#myDiv").empty();

위의 소스 코드를 실행하면 'myDiv' 내부의 모든 <p>와 <span> 요소가 제거되어 내용이 비워집니다.

empty 함수는 해당 요소의 내용을 비우기 때문에, 요소 자체는 그대로 남아있게 됩니다. 이를 통해 요소의 구조는 유지하면서 내용을 업데이트할 수 있습니다.

요약하면, empty 함수는 선택한 요소의 자식 요소들을 제거하여 내용을 비우는 역할을 하며, 웹 페이지 내에서 동적인 내용 변경에 유용하게 사용됩니다.

---

empty 예제 소스 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    /**
     * 데이터 리스트
     */
    const dataList = [
        { name: 'red', data: 225 },
        { name: 'blue', data: 123 },
        { name: 'orange', data: 122 },
        { name: 'black', data: 191 },
        { name: 'white', data: 125 },
    ];

    /**
     * empty button click 이벤트
     */
    $('#emptyId').unbind('click').click(function () {
        
        let html  = '';
        dataList.forEach((item, index) => {
            html += '<tr>';
            html += '   <td>' + index + '</td>';
            html += '   <td>' + item.name + '</td>';
            html += '   <td>' + item.data + '</td>';
            html += '</tr>';
        });
        
        // table tbody 요소 하위에 append html
        $('#dataTable tbody').empty().append(html);
    });
});
</script>
<div>
    <input type="button" value="Empty click" id="emptyId">
</div>
<br>
<div>
    <table id="dataTable" border>
        <thead>
            <tr>
                <th>No</th>
                <th>color</th>
                <th>data</th>
            </tr>
        </thead>
    </table>
</div>

<style>
table {
    table-layout: fixed;
    width       : 500px;
}
</style>

위의 소스 코드는 jQuery의 empty 함수를 활용하여 데이터 리스트의 내용을 테이블로 표현하고 업데이트하는 예제입니다. Empty 버튼을 클릭하면 데이터 리스트를 이용하여 테이블의 tbody를 비우고 다시 채워 넣습니다.

이 코드에서는 empty 함수를 사용하여 테이블의 tbody를 비우는 부분이 주요합니다. 데이터를 이용하여 새로운 tbody를 구성한 후, append 함수를 사용하여 테이블에 추가해 나갑니다.

위 코드는 jQuery를 활용하여 동적으로 테이블의 내용을 변경하는 방법을 보여주며, empty 함수의 활용법을 강조합니다.

 

 

실행 결과

버튼을 클릭할 때마다 tr 요소가 전체 삭제되고 다시 생성되는 결과 화면입니다.

 

 

---

empty와 remove의 차이

 

empty
기능: 선택한 요소의 모든 자식 요소들을 제거하여 내용을 비웁니다.
활용: 요소의 내용을 초기화하거나 새로운 내용을 채우기 전에 이전 내용을 삭제할 때 유용합니다.
예시: $(선택자).empty();
결과: 요소의 내용이 비워지고, 요소 자체는 그대로 남아있습니다.

 

remove
기능: 선택한 요소를 완전히 삭제합니다. 선택한 요소 자체와 그 자식 요소들이 모두 제거됩니다.
활용: 특정 요소와 해당 자식 요소들을 완전히 삭제해야 할 때 사용됩니다.
예시: $(선택자).remove();
결과: 선택한 요소와 그 자식 요소들이 모두 삭제됩니다.

 

 

요약하면, empty 함수는 선택한 요소의 자식 요소들을 제거하여 내용을 비우는 역할을 하며, 요소 자체는 그대로 유지됩니다. 반면 remove 함수는 선택한 요소와 해당 자식 요소들을 완전히 삭제합니다. 두 함수는 각각 다른 상황에서 사용되며, DOM 요소를 조작하거나 업데이트할 때 유용하게 활용됩니다.

 

 

---

최종 정리

 

이번 포스팅에서는 이전에 다뤘던 내용을 더 확장하여 jQuery의 empty 함수에 대해 살펴보았습니다. 이 함수는 remove와 비슷해 보이지만 미묘한 차이점으로 구분됩니다. 이 두 함수를 구분하여 활용하는 것은 중요한데, 그렇지 않으면 원하는 대상을 원하지 않게 조작할 수 있기 때문입니다.

empty 함수는 선택한 요소의 자식 요소들을 제거하여 내용을 비우는데 주로 활용됩니다. 이를 통해 기존 내용을 삭제하거나 초기화할 수 있습니다. 반면 remove 함수는 선택한 요소와 해당 자식 요소들을 완전히 삭제하는 데 사용됩니다. 따라서 어떤 함수를 사용할지는 상황에 따라 다르며, 두 함수의 차이점을 이해하고 활용하는 것이 중요합니다.

요약하자면, empty와 remove 함수는 선택한 요소의 내용을 관리하거나 삭제하는데 사용되며, 각 함수의 특성을 정확히 파악하여 상황에 맞게 활용하는 것이 원활한 개발에 필요한 스킬입니다.

 

 

감사합니다.

 

 

 

* [jQuery] 제이쿼리 remove 함수 사용 방법 알아보기

https://sanblog.tistory.com/20