[jQuery] 제이쿼리 요소 삭제(remove, empty)

제이쿼리를 사용해 HTML 요소를 삭제하는 두가지 방법에 대해 알아보도록 하겠습니다.

 

1.remove()

해당 태그와 그 아래 모든 태그를 삭제합니다.

$(태그이름).remove(id나 class명)

<div id="a">
    <p id="b">1</p>
    <p id="c">2</p>
    <p id="d">3</p>
</div>
<script>
    $('div').remove('#a');
</script>

<div class="e">
    <p class="f">1</p>
    <p class="g">2</p>
    <p class="h">3</p>
</div>
<script>
    $('div').remove('.e');
</script>

id가 a인 태그와 class가 e인 태그가 완전 삭제되었습니다.

 

2.empty()

해당 태그의 자식태그를 모두 삭제합니다.

$(id나 class명).empty()

<div id="a">
    <p id="b">1</p>
    <p id="c">2</p>
    <p id="d">3</p>
</div>
<script>
    $('#a').empty();
</script>

<div class="e">
    <p class="f">1</p>
    <p class="g">2</p>
    <p class="h">3</p>
</div>
<script>
    $('.e').empty();
</script>

id가 a인 태그와 class가 e인 태그는 남아있고 자식 태그들이 삭제됩니다.