Library/jQuery 요소의 추가 / 복사 및 삭제

Dexter_- 2018. 10. 24. 09:39

728x90

요소의 추가 / 복사 및 삭제

요소의 추가

제이쿼리는 새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메소드를 제공한다.

기존 요소의 내부에 추가

다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다.

.append( )
.prepend( )
.appendTo( )
.prependTo( )

.append( ) 메소드

.append( ) 메소드는 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("button").on("click", function() {
                $("#list").append("<li>새로 추가된 아이템이에요!</li>");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.append() 메소드</h1>
    <ul id="list">
        <li>첫 번째 아이템이에요!</li>
        <li>두 번째 아이템이에요!</li>
        <li>세 번째 아이템이에요!</li>
    </ul>
    <button>아이템 추가</button>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

.append() 메소드

첫 번째 아이템이에요!
두 번째 아이템이에요!
세 번째 아이템이에요!

.prepend( ) 메소드

.prepend( ) 메소드는 선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가한다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("button").on("click", function() {
                $("li").prepend("새로 추가된 콘텐츠에요!");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.prepend() 메소드</h1>
    <ul>
        <li>첫 번째 아이템이에요!</li>
        <li>두 번째 아이템이에요!</li>
        <li>세 번째 아이템이에요!</li>
    </ul>
    <button>아이템 추가</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.prepend() 메소드

첫 번째 아이템이에요!
두 번째 아이템이에요!
세 번째 아이템이에요!

.appendTo( ) 메소드

.appendTo( ) 메소드는 선택한 요소를 '해당 요소의 마지막'에 삽입한다.

그 동작은 .append( ) 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대이다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("#firstBtn").on("click", function() {
                // id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소를 추가함.
                $("#firstItem").appendTo("#list");
            });
            $("#secondBtn").on("click", function() {
                // id가 "list"인 요소의 맨 마지막에 id가 "secondItem"인 요소를 추가함.
                $("#secondItem").appendTo("#list");
            });
            $("#thirdBtn").on("click", function() {
                // id가 "list"인 요소의 맨 마지막에 id가 "thirdItem"인 요소를 추가함.
                $("#thirdItem").appendTo("#list");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.appendTo() 메소드</h1>
    <p>아래 버튼들을 왼쪽에서부터 차례대로 눌러보세요!</p>
    <ul id="list">
        <li id="firstItem">첫 번째 아이템이에요!</li>
        <li id="secondItem">두 번째 아이템이에요!</li>
        <li id="thirdItem">세 번째 아이템이에요!</li>
    </ul>
    <button id="firstBtn">첫 번째 아이템 추가</button>
    <button id="secondBtn">두 번째 아이템 추가</button>
    <button id="thirdBtn">세 번째 아이템 추가</button>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

.appendTo() 메소드

아래 버튼들을 왼쪽에서부터 차례대로 눌러보세요!

첫 번째 아이템이에요!
두 번째 아이템이에요!
세 번째 아이템이에요!

.prependTo( ) 메소드

.prependTo( ) 메소드는 선택한 요소를 '해당 요소의 처음'에 삽입한다.

그 동작은 .prepend( ) 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대이다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("button").on("click", function() {
                $("<b>새로 추가된 콘텐츠에요!</b>").prependTo(".item");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.prependTo() 메소드</h1>
    <ul>
        <li class="item">첫 번째 아이템이에요!</li>
        <li class="item">두 번째 아이템이에요!</li>
        <li>세 번째 아이템이에요!</li>
    </ul>
    <button>콘텐츠 추가</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.prependTo() 메소드

첫 번째 아이템이에요!
두 번째 아이템이에요!
세 번째 아이템이에요!

기존 요소의 내부에 새로운 요소나 콘텐츠를 추가해주는 메소드

메소드	설명
.append( )	선택한 요소의 마지막에 새로운 요소나 콘텐츠를 추가함.
.prepend( )	선택한 요소의 처음에 새로운 요소나 콘텐츠를 추가함.
.appendTo( )	선택한 요소를 해당 요소의 처음에 삽입함.
.prependTo( )	선택한 요소를 해당 요소의 처음에 삽입함.
.html( )	해당 요소의 HTML 콘텐츠를 반환하거나 설정함.
.text( )	해당 요소의 텍스트 콘텐츠를 반환하거나 설정함.

기존 요소의 외부에 추가

다음 메소드를 사용하면 기존 요소의 앞이나 뒤에 새로운 요소나 콘텐츠를 추가할 수 있다.

before( )
after( )
insertBefore( )
insertAfter( )

.before( ) 메소드

.before( ) 메소드는 선택한 요소의 '바로 앞에' 새로운 요소나 콘텐츠를 추가한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        table, tr, td { 
            border: 2px solid red;
            border-collapse: collapse;
        }
        table { margin-bottom: 15px; }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                // id가 "firstRow"인 요소의 바로 앞에 새로운 <tr>요소를 추가함.
                $("#firstRow").before("<tr><td>새로운 행이에요!</td></tr>");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.before() 메소드</h1>
    <table>
        <tr id="firstRow">
            <td>첫 번째 셀이에요!</td>
            <td>두 번째 셀이에요!</td>
        </tr>
    </table>
    <button>행 추가</button>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

.before() 메소드

첫 번째 셀이에요!

두 번째 셀이에요!

.after( ) 메소드

.after( ) 메소드는 선택한 요소의 '바로 뒤에' 새로운 요소나 콘텐츠를 추가한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        table, tr, td { 
            border: 2px solid red;
            border-collapse: collapse;
        }
        table { margin-bottom: 15px; }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                // id가 "firstRow"인 요소의 바로 뒤에 새로운 <tr>요소를 추가함.
                $("#firstRow").after("<tr><td>새로운 행이에요!</td></tr>");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.after() 메소드</h1>
    <table>
        <tr id="firstRow">
            <td>첫 번째 셀이에요!</td>
            <td>두 번째 셀이에요!</td>
        </tr>
    </table>
    <button>행 추가</button>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

.after() 메소드

첫 번째 셀이에요!

두 번째 셀이에요!

.insertBefore( ) 메소드

.insertBefore( ) 메소드는 선택한 요소를 '해당 요소의 앞에' 삽입한다.

그 동작은 before( )메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대이다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        table, tr, td { 
            border: 2px solid red;
            border-collapse: collapse;
        }
        table { margin-bottom: 15px; }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                // id가 "secondColumn"인 요소의 바로 앞에 새로운 <td>요소를 추가함.
                $("<td>새로운 셀이에요!</td>").insertBefore("#secondColumn");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.insertBefore() 메소드</h1>
    <table>
        <tr>
            <td>첫 번째 셀이에요!</td>
            <td id="secondColumn">두 번째 셀이에요!</td>
        </tr>
    </table>
    <button>셀 추가</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.insertBefore() 메소드

첫 번째 셀이에요!

두 번째 셀이에요!

.insertAfter( ) 메소드

.insertAfter( ) 메소드는 선택한 요소를 '해당 요소의 뒤에' 삽입한다.

그 동작은 .after( ) 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대이다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        table, tr, td { 
            border: 2px solid red;
            border-collapse: collapse;
        }
        table { margin-bottom: 15px; }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                // id가 "secondColumn"인 요소의 바로 앞에 새로운 <td>요소를 추가함.
                $("<td>새로운 셀이에요!</td>").insertAfter("#secondColumn");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.insertAfter() 메소드</h1>
    <table>
        <tr>
            <td>첫 번째 셀이에요!</td>
            <td id="secondColumn">두 번째 셀이에요!</td>
        </tr>
    </table>
    <button>셀 추가</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.insertAfter() 메소드

첫 번째 셀이에요!

두 번째 셀이에요!

기존 요소를 포함하는 요소의 추가

다음 메소드를 사용하면 기존 요소를 포함하는 새로운 요소나 콘텐츠를 추가할 수 있다.

.wrap( )
.wrapAll( )
.wrapInner( )

.wrap( ) 메소드

.wrap( ) 메소드는 '선택한 요소'를 포함하는 새로운 요소를 추가한다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        div { margin: 10px; }
        .content { border: 2px solid yellow; }
        .wrapper { border: 2px solid green; }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                // class가 "content"인 각 요소를 포함하는 새로운 요소를 추가함.
                $(".content").wrap("<div class='wrapper'></div>");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.wrap() 메소드</h1>
    <div class="content">첫 번째 컨텐츠에요!</div>
    <div class="content">두 번째 컨텐츠에요!</div>
    <button>div 요소 추가</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.wrap() 메소드

첫 번째 컨텐츠에요!

두 번째 컨텐츠에요!

.wrapAll( ) 메소드

.wrapAll( ) 메소드는 '선택한 모든 요소'를 포함하는 새로운 요소를 추가한다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        div { margin: 10px; }
        .content { border: 2px solid yellow; }
        .wrapper { border: 2px solid green; }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                // class가 "content"인 모든 요소를 포함하는 새로운 요소를 추가함.
                $(".content").wrapAll("<div class='wrapper'></div>");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.wrapAll() 메소드</h1>
    <div class="content">첫 번째 컨텐츠에요!</div>
    <div class="content">두 번째 컨텐츠에요!</div>
    <button>div 요소 추가</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.wrapAll() 메소드

첫 번째 컨텐츠에요!

두 번째 컨텐츠에요!

.wrapInner( ) 메소드

.wrapInner( ) 메소드는 '선택한 요소에 포함되는' 새로운 요소를 추가한다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Insert</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        div { margin: 10px; }
        .content { border: 2px solid yellow; }
        .wrapper { border: 2px solid green; }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                // class가 "content"인 각 요소에 포함되는 새로운 요소를 추가함.
                $(".content").wrapInner("<div class='wrapper'></div>");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.wrapInner() 메소드</h1>
    <div class="content">첫 번째 컨텐츠에요!</div>
    <div class="content">두 번째 컨텐츠에요!</div>
    <button>div 요소 추가</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.wrapInner() 메소드

첫 번째 컨텐츠에요!

두 번째 컨텐츠에요!

기존 요소를 포함하는 새로운 요소를 추가해주는 메소드

메소드	설명
.wrap( )	선택한 요소를 포함하는 새로운 요소를 추가함.
.wrapAll( )	선택한 모든 요소를 포함하는 새로운 요소를 추가함.
.wrapInner( )	선택한 요소에 포함되는 새로운 요소를 추가함.

요소의 복사

다음 메소드를 사용하면 선택한 요소나 콘텐츠를 복사하여 새로운 요소나 콘텐츠를 생성할 수 있다.

clone( )

.clone( ) 메소드

.clone( ) 메소드는 선택한 요소를 복사하여 새로운 요소를 생성한다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Clone</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("button").on("click", function() {
                // id가 "firstItem"인 요소를 복사하여 id가 "list"인 요소에 추가함.
                $("#firstItem").clone().appendTo("#list");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.clone() 메소드</h1>
    <ul id="list">
        <li id="firstItem">첫 번째 아이템이에요!</li>
        <li>두 번째 아이템이에요!</li>
        <li>세 번째 아이템이에요!</li>
    </ul>
    <button>아이템 복사</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.clone() 메소드

첫 번째 아이템이에요!
두 번째 아이템이에요!
세 번째 아이템이에요!

다음 예제는 앞서 살펴본 .appendTo( )메소드의 예제이다.

예제

$(function() {

$("#firstBtn").on("click", function() {

// id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소를 추가함.

$("#firstItem").appendTo("#list");

});

위의 예제에서 볼 수 있듯이 .clone( ) 메소드는 기존의 HTML 요소를 복사하여 새로운 HTML 요소를 생성할 뿐이다.

따라서 반드시 .append( ) 메소드나 .appendTo( ) 메소드와 같은 다른 메소드를 이용하여 요소를 추가해야 한다.

.clone( ) 메소드를 사용하지 않고 .appendTo( ) 메소드만을 사용하면, 기존에 존재하는 HTML 요소를 그대로 추가하는 점이 다르다.

Tip : .appendTo( ) 메소드는 선택한 요소를 '해당 요소의 마지막'에 삽입해 주는 메소드이다.

요소를 복사해주는 메소드

메소드

설명

.clone( )

선택한 요소를 복사하여 새로운 요소를 생성함.

요소의 대체

다음 메소드를 사용하면 선택한 요소나 콘텐츠를 지정된 요소나 콘텐츠로 대체할 수 있다.

replaceAll( )
replaceWith( )

.replaceAll( ) 메소드

.replaceAll( ) 메소드는 선택한 요소를 지정된 요소로 대체한다.

이 메소드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받을 수 있다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Replace</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("button").on("click", function() {
                // class가 "item"인 각 요소를 id가 "firstItme"인 요소로 대체함.
                $("#firstItem").replaceAll(".item");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.replaceAll() 메소드</h1>
    <ul>
        <li class="item" id="firstItem">첫 번째 아이템이에요!</li>
        <li class="item" id="secondItem">두 번째 아이템이에요!</li>
        <li class="item" id="thirdItem">세 번째 아이템이에요!</li>
    </ul>
    <button>아이템 대체</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.replaceAll() 메소드

첫 번째 아이템이에요!
두 번째 아이템이에요!
세 번째 아이템이에요!

.replaceWith( ) 메소드

.replaceWith( ) 메소드는 선택한 요소를 지정된 요소로 대체한다.

이 메소드는 인수로 HTML 코드 형식의 문자열이나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받을 수 있다.

또한, 선택한 요소를 대체할 수 있는 컨텐츠를 반환하는 함수를 인수로 전달받을 수도 있다.

.replaceWith( ) 메소드의 동작은 .replaceAll( ) 메소드와 비슷하지만, 소스(source)와 타겟(target)의 위치가 서로 반대이다.

또한, .replaceWith( ) 메소드는 지정된 요소로 대체되어 제거된 기존 요소를 반환한다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Replace</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("button").on("click", function() {
                // class가 "item"인 모든 요소를 id가 "firstItme"인 요소로 대체함.
                $(".item").replaceWith($("#firstItem"));
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.replaceWith() 메소드</h1>
    <ul>
        <li class="item" id="firstItem">첫 번째 아이템이에요!</li>
        <li class="item" id="secondItem">두 번째 아이템이에요!</li>
        <li class="item" id="thirdItem">세 번째 아이템이에요!</li>
    </ul>
    <button>아이템 대체</button>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

.replaceWith() 메소드

첫 번째 아이템이에요!
두 번째 아이템이에요!
세 번째 아이템이에요!

Tip : .replaceAll( ) 메소드와 .replaceWith( ) 메소드는 제거된 요소와 관련된 모든 데이터와 이벤트 핸들러도 같이 제거한다.

요소를 대체해주는 메소드

메소드

설명

.replaceAll( )

선택한 요소를 지정된 요소로 대체함.

.replaceWith( )

선택한 모든 요소를 지정된 요소로 대체함.

요소의 삭제

다음 메소드를 사용하면 선택한 요소나 콘텐츠를 삭제할 수 있다.

.remove( )
.detach( )
.empty( )
.unwrap( )

.remove( ) 메소드

.remove( ) 메소드는 선택한 요소를 DOM 트리에서 삭제한다.

이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트도 모두 함께 삭제된다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Remove</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("button").on("click", function() {
                // class가 "content"인 요소 중에서 class가 각각 "first", "second"인 요소를 모두 삭제함.
                $(".content").remove(".first, .second");
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.remove() 메소드</h1>
    <div>
        <div class="content first">첫 번째 컨텐츠에요!</div>
        <div class="content second">두 번째 컨텐츠에요!</div>
        <div class="content third">세 번째 컨텐츠에요!</div>
    </div>
    <br>
    <button>div 요소 삭제</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.remove() 메소드

첫 번째 컨텐츠에요!

두 번째 컨텐츠에요!

세 번째 컨텐츠에요!

.detach( ) 메소드

.detach( ) 메소드는 선택한 요소를 DOM 트리에서 삭제한다.

이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지된다.

.detach( ) 메소드가 반환하는 제이쿼리 객체를 .append( ) 나 .prepend( ) 와 같은 메소드에 인수로 전달하면 삭제한 요소를 다시 복구할 수도 있다.

예제

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

실행결과 :

.detach() 메소드

첫 번째 컨텐츠에요!

두 번째 컨텐츠에요!

세 번째 컨텐츠에요!

.empty( ) 메소드

.empty( ) 메소드는 선택한 요소의 자식 요소를 모두 삭제한다.

이때 .remove( )나 .detach( ) 메소드와는 달리 선택된 요소 그 자체는 삭제되지 않는다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Remove</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("button").on("click", function() {
                $("#container").empty();    // id가 "container"인 요소의 자식 요소를 모두 삭제함.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.empty() 메소드</h1>
    <div id="container" style="border: solid 3px teal; padding: 5px">
        <div>첫 번째 컨텐츠에요!</div>
        <div>두 번째 컨텐츠에요!</div>
        <div>세 번째 컨텐츠에요!</div>
    </div>
    <br>
    <button>자식 요소 삭제</button>
    
</body>
 
</html>
Colored by Color Scripter
cs

실행결과 :

.empty() 메소드

첫 번째 컨텐츠에요!

두 번째 컨텐츠에요!

세 번째 컨텐츠에요!

.unwrap( ) 메소드

.unwrap( ) 메소드는 선택한 요소의 부모 요소를 삭제한다.

예제

<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>jQuery Element Remove</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        div { border: 2px solid green; margin: 10px; }
        #container { border: 2px solid orange; }
   </style>
    <script>
        $(function() {
            $("button").on("click", function() {
                $("span").unwrap();        // 모든 <span>요소의 부모 요소를 삭제함.
            });
        });
   </script>
</head>
 
<body>
 
    <h1>.unwrap() 메소드</h1>
    <div id="container">
        <div><span>첫 번째</span> 컨텐츠에요!</div>
        <div><span>두 번째</span> 컨텐츠에요!</div>
        <div><span>세 번째</span> 컨텐츠에요!</div>
    </div>
    <br>
    <button>부모 요소 삭제</button>
    
</body>
 
</html>

Colored by Color Scripter

실행결과 :

.unwrap() 메소드

첫 번째 컨텐츠에요!

두 번째 컨텐츠에요!

세 번째 컨텐츠에요!

요소를 삭제해주는 메소드

메소드	설명
.remove( )	선택한 요소를 DOM 트리에서 삭제함. (삭제된 요소와 연관된 제이쿼리 데이터나 이벤트도 같이 삭제됨)
detach( )	선택한 요소를 DOM 트리에서 삭제함. (삭제된 요소와 연관된 제이쿼리 데이터나 이벤트는 유지됨)
empty( )	선택한 요소의 자식 요소를 모두 삭제함.
.unwrap( )	선택한 요소의 부모 요소를 삭제함.

728x90

저작자표시 비영리 변경금지

'Library > jQuery' 카테고리의 다른 글

요소의 영역(크기/위치) (0)	2018.10.24
필터링 메소드 (0)	2018.10.24
요소의 탐색 (0)	2018.10.24
요소의 선택 (CSS/제이쿼리 선택자) (0)	2018.10.23
jQuery 로드 / 문법 (0)	2018.10.23

Embedded Software Embedded Software

.append() 메소드

.prepend() 메소드

.appendTo() 메소드

.prependTo() 메소드

.before() 메소드

.after() 메소드

.insertBefore() 메소드

.insertAfter() 메소드

.wrap() 메소드

.wrapAll() 메소드

.wrapInner() 메소드

.clone() 메소드

.replaceAll() 메소드

.replaceWith() 메소드

.remove() 메소드

.detach() 메소드

.empty() 메소드

.unwrap() 메소드

'Library > jQuery' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바