jQuery detach(), empty(), remove()

.detach() – 지정한 요소를 포함 하위 요소 모두 제거

.empty() – 지정한 요소의 하위 요소를 제거

.remove() – 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거

$('#detachBtn').click(function(){
  $('#target').detach();
});

$('#emptyBtn').click(function(){
  $('#target').empty();                  
});

$('#removeBtn').click(function(){
  $('#target').remove();                           
});

<fieldset style="height:150px;position:relative;">
  <legend>Target</legend>
  <div id="target" style="background-color:gray;height:80px;width:80%;position:relative;left:10%;top:10px">
    <div id="innerTarget" style="background-color:green;height:50px;width:50%;position:absolute;left:25%;top:20%;"></div>
  </div>
</fieldset>

<input type="button" id="detachBtn" value="detach"></input>
<input type="button" id="emptyBtn" value="empty"></input>
<input type="button" id="removeBtn" value="remove"></input>