<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>.detach() 메소드</h1>
<div id="container">
<div>첫 번째 컨텐츠에요!</div>
<div class="contentGroup">
<div class="content">두 번째 컨텐츠에요!</div>
<div class="content">세 번째 컨텐츠에요!</div>
</div>
</div>
<br>
<button id="detachBtn">div 요소 삭제</button>
<button id="restoreBtn">div 요소 복구</button>
<script src="../../plugins/jquery/jquery.min.js"></script>
<script>
$(function () {
var data;
$("#detachBtn").on("click", function() {
data = $(".contentGroup").detach(); // 클래스가 "contentGroup"인 데이터 모두 삭제
// data = $(".content").detach(); // 클래스가 "content"인 데이터 모두 삭제
});
$("#restoreBtn").on("click", function() {
$("#container").append(data); // detach 당시 삭제되었던 모든 요소를 다시 추가
})
})
</script>
</body>
</html>[Jquery] remove(), detach() - 요소 삭제하는 방법
이번에는 요소를 삭제하는 메소드에 대해 알아보겠습니다. 요소를 삭제하는 메소드는 여러가지가 있습니다. 하지만, 이번 글에는 remove()와 detach()만을 다루고 다음에 시간이 되면 empty() 메소드
itprogramming119.tistory.com
'JavaScript' 카테고리의 다른 글
| 얕은복사, 깊은 복사 (0) | 2021.09.01 |
|---|---|
| arr.length를 반드시 변수에 저장해서 사용하도록 하자... (0) | 2021.09.01 |
| select 태그 option 값 가져오기 (0) | 2021.08.25 |
| input text box 특수문자 입력 제한 / 입력 시 이전값으로 되돌아가기 (0) | 2021.08.19 |
| datatables 특정컬럼 숨기기, 내림차순정렬 (0) | 2021.08.18 |
