[jQuery] 요소의 복사 및 삭제

.clone() 메소드

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

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

.replaceAll() 메소드

선택한 요소를 지정된 요소로 대체합니다.

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

.replaceWith() 메소드는 .replaceAll() 메소드와 비슷하지만, 소스와 타겟의 위치가 서로 반대입니다.

.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"인 요소의 자식 요소를 모두 삭제함.
  });
});