[jQuery]태그 내용 삭제 html() remove()의 차이

html()

대상.html("")

자식 내용을 모두 지울 경우 remove()를 사용할 수도 있지만 html()메서드를 사용하는 것이 더 효과적이다.

 

<script>
$(document).ready(function() {
    $("#btnDel").click(function() {
        $(".list").html("");
    })
});
</script>

<button id="btnDel">
    리스트 삭제
</button>
<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

 

실행결과

버튼을 클릭하면 li내용이 다 삭제

 

 

remove를 사용할 경우

<script>
$(document).ready(function() {
    $("#btnDel").click(function() {
        $(".list").remove("");
    })
});
</script>

<button id="btnDel">
    리스트 삭제
</button>
<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

.list ul부터 삭제됨