[jQuery] 요소의 복사 및 삭제

복습

https://shins99.tistory.com/83

[jQuery] 요소의 추가

---

요소의 복사

- 다음 메서드를 사용하면 선택한 요소나 콘텐츠를 복사하여 새로운 요소나 콘텐츠 생성 가능

 

1. .clone()

---

.clone() 메서드

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

 

예제
$(function() {
    $("button").on("click", function() {
        // id가 "firstItem"인 요소를 복사하여 id가 "list"인 요소에 추가함.
        $("#firstItem").clone().appendTo("#list");
    });
});

 

.appendTo() 메서드 예제

예제
$(function() {
    $("#firstBtn").on("click", function() {
        // id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소를 추가함.
        $("#firstItem").appendTo("#list");
    });
});

 

 

- .clone() 메서드는 기존의 HTML 요소를 복사하여 새로운 HTML 요소만을 생성

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

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

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

---

요소를 복사해주는 메서드

 

.clone()

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

---

요소의 대체

다음 메서드를 사용시 선택한 요소나 콘텐츠를 지정된 요소나 콘텐츠로 대체 가능

 

1. .replaceAll()

2. .replaceWith()

---

.replaceAll() 메서드

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

(인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달 받을 수 있음)

 

예제
$(function() {
    $("button").on("click", function() {
        // class가 "item"인 각 요소를 id가 "firstItme"인 요소로 대체함.
        $("#firstItem").replaceAll(".item");
    });
});

---

.replaceWith() 메서드

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

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

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

 

예제
$(function() {
    $("button").on("click", function() {
        // class가 "item"인 모든 요소를 id가 "firstItme"인 요소로 대체함.
        $(".item").replaceWith($("#firstItem"));
    });
});

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

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

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

 

---

요소를 대체해주는 메서드

 

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

---

요소의 삭제

다음 메서드를 사용시 선택한 요소나 콘텐츠를 삭제 가능

 

1. .remove()

2. .detach()

3. .empty()

4. .unwrap()

---

.remove() 메서드

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

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

예제
$(function() {
    $("button").on("click", function() {
        // class가 "content"인 요소 중에서 class가 각각 "first", "second"인 요소를 모두 삭제함.
        $(".content").remove(".first, .second");
    });
});

---

.detach() 메서드

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

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

 

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

 

예제
$(function() {
    var data;
    $("#detachBtn").on("click", function() {
        data = $(".content").detach(); // class가 "content"인 요소를 모두 삭제함.
    });
    $("#restoreBtn").on("click", function() {
        $("#container").append(data);  // detach() 메소드로 삭제되었던 모든 요소를 다시 추가함.
    });
});

 

---

.empty() 메서드

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

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

 

예제
$(function() {
    $("button").on("click", function() {
        $("#container").empty(); // id가 "container"인 요소의 자식 요소를 모두 삭제함.
    });
});

 

---

.unwrap() 메소드

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

 </p

예제
$(function() {
    $("button").on("click", function() {
        $("span").unwrap(); // 모든 <span>요소의 부모 요소를 삭제함.
    });
});
 

 

---

요소를 삭제해주는 메서드

 

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