[jQuery] .empty() - 선택한 요소의 내용을 지우는 메서드

안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.

jQuery의 .empty() 사용방법

jQuery의 .empty()는 해당 요소의 텍스트 콘텐츠는 유지되지만

모든 하위 요소(자식 요소)가 삭제됩니다.
즉, 이 메서드를 사용하면 선택한 요소의 내용을 간단하게 비울 수 있습니다.

 

'#myDiv' 요소의 내용을 비우려면 다음과 같이 jQuery 코드를 작성할 수 있습니다.

// javascript code
$('#myDiv').empty();

// html code
<div id="myDiv">
  <p>Hello, world!</p>
  <a href="#">Click me!</a>
</div>

이렇게 함으로써, '#myDiv' 요소 내부의 '<p>'요소와 '<a>'요소가 모두 삭제됩니다. 
결과적으로, '#myDiv' 요소의 내용은 비어 있게 됩니다.

// 실행 후 html code
<div id="myDiv">
</div>

 

empty() 메서드는 선택한 요소를 유지하면서 내용만 제거하므로, 

선택한 요소의 속성이나 이벤트 등은 유지됩니다.