• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Element Remove</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <script>
9
        $(function() {
10
            var data;
11
            $("#detachBtn").on("click", function() {
12
                data = $(".content").detach();  // class가 "content"인 요소를 모두 삭제함.
13
            });
14
            $("#restoreBtn").on("click", function() {
15
                $("#container").append(data);   // detach() 메소드로 삭제되었던 모든 요소를 다시 추가함.
16
            });
17
        });
18
    </script>
19
</head>
20
​
21
<body>
22
​
23
    <h1>.detach() 메소드</h1>
24
    <div id="container">
25
        <div>첫 번째 컨텐츠에요!</div>
26
        <div class="content">두 번째 컨텐츠에요!</div>
27
        <div class="content">세 번째 컨텐츠에요!</div>
28
    </div>
29
    <br>
30
    <button id="detachBtn">div 요소 삭제</button>
31
    <button id="restoreBtn">div 요소 복구</button>
32
33
</body>
34
​
35
</html>