jQuery element 요소 복사 및 삭제

---

 요소의 복사

선택한 요소나 콘텐츠를 복사하여 새로운 요소나 콘텐츠를 생성 가능
 . clone() : 선택한 요소를 복사하여 새로운 요소를 생성

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

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

• 위의 예제에서 볼 수 있듯이. clone() 메서드는 기존의 HTML 요소를 복사하여 새로운 HTML 요소를 생성할 뿐
• 따라서 반드시 .append() 메서드나 .appendTo() 메서드와 같은 다른 메서드를 이용하여 요소를 추가해야 함
• .clone() 메서드를 사용하지 않고 .appendTo() 메서드만을 사용하면, 기존에 존재하는 HTML 요소를 그대로 추가하는 것이 차이점
• .appendTo() : 선택한 요소를 '해당 요소의 마지막'에 삽입해 주는 메서드
• .clone() : 선택한 요소를 복사하여 새로운 요소를 생성함.

요소의 대체

선택한 요소나 콘텐츠를 지정된 요소나 콘텐츠로 대체 가능
.replaceAll() : 선택한 요소를 지정된 요소로 대체, 인수로 선택자나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달 가능

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

.replaceWith() : 선택한 요소를 지정된 요소로 대체

• 이 메서드는 인수로 HTML 코드 형식 문자열이나 제이쿼리 객체, HTML DOM 요소, 배열 등을 전달받음.
• 또한, 선택한 요소를 대체할 수 있는 컨텐츠를 반환하는 함수를 인수로 전달받을 수도 있습니다.
• .replaceAll() 메서드와 비슷하지만, 소스(source)와 타겟(target)의 위치가 서로 반대
• 또한, .replaceWith() 메서드는 지정된 요소로 대체되어 제거된 기존 요소를 반환
• .replaceAll() 와 .replaceWith() 는 제거된 요소와 관련된 모든 데이터와 이벤트 핸들러도 같이 제거

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

.remove() : 선택한 요소를 DOM 트리에서 삭제, 이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트도 모두 함께 삭제

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

// .detach() : 선택한 요소를 DOM 트리에서 삭제
// 이때 삭제되는 요소와 연관된 제이쿼리 데이터나 이벤트는 삭제되지 않고, 계속 유지
// .detach() 메서드가 반환하는 제이쿼리 객체를 .append()나 .prepend()와 같은 메서드에 인수로 전달하면 삭제한 요소를 다시 복구 가능
$(function() {
    let data;
    $("#detachBtn").on("click", function() {
        data = $(".content").detach(); // class가 "content"인 요소를 모두 삭제함.
    });

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

// .empty() 메서드는 선택한 요소의 자식 요소를 모두 삭제
// 이때 .remove()나 .detach() 메서드와는 달리 선택된 요소 그 자체는 삭제
$(function() {
    $("button").on("click", function() {
        $("#container").empty(); // id가 "container"인 요소의 자식 요소를 모두 삭제함.
    });
});

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

Reference

https://www.tcpschool.com/jquery/jq_elementSelection_cssSelector