JQuery day7

2022-02-19 1 분 소요

요소 대체 | 요소 삭제

JQuery로 DOM 다루기

계속해서 JQuery로 DOM(문서객체모델)을 다루는 방법을 알아보자

[요소 대체]

종류	설명
replaceAll()	선택한 요소를 지정된 요소로 대체한다. 인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달 받을 수 있다.

요소 대체에 대한 예제를 확인해보자

<ul id="list">
    <li class="item" id="firstItem">첫번째 아이템</li>
    <li class="item" id="secondItem">두번째 아이템</li>
    <li class="item" id="thirdItem">세번째 아이템</li>
</ul>
<button>아이템 대체</button>

$(function(){
    $('button').on('click', function(){
        $('#firstItem').replaceAll('.item'); // 모든 item 요소를 firstItem요소로 대체하라.
    });
});

이벤트가 작동하지 않았을 때)
jquery7_1

이벤트가 작동된 후)
jquery7_2

[요소 삭제]

종류	설명
remove()	선택한 요소를 DOM 트리에서 삭제하며, 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트 모두 함께 삭제한다.
detach()	선택한 요소를 DOM 트리에서 삭제하며, 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지한다.
empty()	선택한 요소의 자식 요소를 모두 삭제하며, remove()나 detach() 메소드와 달리 선택된 요소 그 자체는 삭제되지 않는다.
unwrap()	선택한 요소의 부모 요소를 삭제한다.

요소 삭제 예제를 확인해보자

<div id="container" style="border: 3px solid deeppink; padding: 5px;">
    <div class="content first">첫번째 아이템</div>
    <div class="content second">두번째 아이템</div>
    <div class="content thrid">세번째 아이템</div>
    <div>네번째 아이템</div>
    <h4><span>다섯번째 아이템</span></h4>
</div>

<button id="removeBtn">아이템 삭제(remove)</button>
<button id="detachBtn">div 요소 삭제(detach)</button>
<button id="restoreBtn">div 요소 복구(append)</button>
<button id="emptyBtn">자식 요소 삭제(empty)</button>
<button id="unwrapBtn">부모 요소 삭제(unwrap)</button>

$(function(){
    $('#removeBtn').on('click', function(){
        $('.content').remove('.first, .second');
    });

    let data;
    $('#detachBtn').on('click', function(){
        data = $('.content').detach();
    });
    $('#restoreBtn').on('click', function(){
        $('#container').append(data);  // #container 내 자식 요소로 붙임
    });

    $('#emptyBtn').on('click', function(){
        $('#container').empty();  // #container 내 자식 요소 전부 삭제
    });

    $('#unwrapBtn').on('click', function(){
        $('span').unwrap();
        // 부모요소(h4)만을 삭제하는 것일뿐 부모요소 내 content까지 전부 삭제하는 것은 아님
    });
});