[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() 메서드 설명 및 차이점