프로그래밍/JQuery
JQuery로 DOM 다루기 - 요소 삭제
하와이블루
2022. 10. 27. 23:29
728x90
요소를 삭제하는 방법으로 다음과 같다.
| 종류 | 설명 |
| 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>
728x90