[jQuery] DOM 요소 제거하기 - remove(), empty() 메서드

jQuery DOM 요소 제거하기

다음과 같이 body가 구성되어 있을때 span 요소를 제거하기 위한 방법으로 두 가지가 있습니다. remove() 메서드를 사용하거나 empty() 메서드는 사용하는 방법입니다.

remove() 메서드

사용법은 $(selector).remove() 이며, selector 에 해당하는 DOM 요소를 제거합니다.

<script>
    $(document).ready(function () {
        $('span').remove();
    });
</script>

span 요소가 통째로 제거됩니다.

empty() 메서드

사용법은 $(selector).empty() 이며, selector 에 해당하는 DOM 요소의 내용을 (제거)비웁니다.

<script>
    $(document).ready(function () {
        $('span').empty();
    });
</script>

따라서 셀렉터로 잡은 span 요소가 아닌 그 내부(하위)의 요소들이 제거됩니다.

text() 또는 html() 메서드로 제거하기

DOM 요소의 textContent 속성과 innerHTML 을 제어하는 text() 메서드 또는 html() 메서드로도 내용을 제거할 수 있습니다.

$('span').html('');
$('span').text('');

참고글

• [jQuery] jQuery text(), html() 메서드 설명 및 차이점