객체 편집 메서드
clone() / empty() / remove()
clone() : 선택한 요소를 복제
empty() : 선택한 요소의 모든 하위 요소를 삭제
remove() : 선택한 요소를 삭제
기본형
$("요소 선택").clone([true | false]); 인자값이 true면 이벤트 까지 복제, false면 요소만 복제. 기본값은 false
$("요소 선택").empty();
$("요소 선택").remove();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
$(function() {
let copyObj = $('.box1').children().clone();
$('.box2').remove(); // box2 번을 제거
$('.box3').empty(); // class box3 은 살아있고 그 안에 내용들만 삭제
$('.box3').append(copyObj); // box1 번 복사한걸 box3에 붙여넣기
});
</script>
</head>
<body>
<div class="box1">
<p>내용1</p>
<p>내용2</p>
</div>
<div class="box2">
<p>내용1</p>
<p>내용2</p>
</div>
<div class="box3">
<p>내용1</p>
<p>내용2</p>
</div>
</body>
</html>
