-
JQuery로 DOM 다루기 - 요소 삭제프로그래밍/JQuery 2022. 10. 27. 23:29728x90
요소를 삭제하는 방법으로 다음과 같다.
종류 설명 remove() 선택한 요소를 DOM 트리에서 삭제하며,
삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트 모두 함께 삭제한다.detach() 선택한 요소를 DOM 트리에서 삭제하며,
삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지한다.empty() 선택한 요소의 자식 요소를 모두 삭제하며,
remove()나 detach() 메소드와 달리 선택된 요소 그 자체는 삭제되지 않는다.unwrap() 선택한 요소의 부모 요소를 삭제한다. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>요소의 삭제</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </head> <body> <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">아이템 삭제</button> <button id="detachBtn">div 요소 삭제</button> <button id="restoreBtn">div 요소 복구</button> <button id="emptyBtn">자식 요소 삭제</button> <button id="unwrapBtn">부모 요소 삭제</button> </body> </html>
기본 결과 화면 위 코드에 스크립트를 추가하여 각 버튼요소마다 이벤트를 부여한다.
<script> $(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까지 전부 삭제하는 것은 아니다. }); }); </script>
remove() 이벤트 결과 
detach() 이벤트 결과 
append() 이벤트 결과 
empty() 이벤트 결과 
unwrap() 이벤트 결과 728x90'프로그래밍 > JQuery' 카테고리의 다른 글
형제요소 탐색 (0) 2022.10.30 조상요소 탐색 (0) 2022.10.28 JQuery로 DOM 다루기 - 요소 대체 (0) 2022.10.27 JQuery로 DOM 다루기 - 요소 복제 (0) 2022.10.26 JQuery로 DOM 다루기 - 요소 포함 (0) 2022.10.25