요소 복사,삭제태그들....clone(),remove()

 <hr>

    <h3>요소 복사/ 삭제하기</h3>

    <p>

        clone():지정한 요소를 복제할 때 사용 <br>

        remove() /detach()/ empty() :

        요소를 삭제하거나 안의 내용을 텅~비울때 사용<br>

        remove(): 요소자체를 지움<br>

        detach(): 요소의 모양은 지우나 연결되었던 이벤트는 남겨둠 <br>

        empty(): 요소안의 내용을 비움

    </p>

    <div id="cloneTest">

        <div class="item" id="item1">

            <button class="copy">복사하기</button>

            <button class="delete">삭제하기</button>

        </div>

        <div class="item" id="item2">

            <button class="copy">복사하기</button>

            <button class="delete">삭제하기</button>

        </div>

        <div class="item" id="item3">

            <button class="copy">복사하기</button>

            <button class="delete">삭제하기</button>

        </div>

    </div>

    <hr>

    <div id="result"></div>

    <script>

        $(function(){

            $('.copy').click(function(){

                //clone()/clone(true/false) 둘중 선택/

                //clone()/clone(false): 모양 복사, 연결된 이벤트 기능없음

                $(this).parent().clone(true).appendTo($('#result'));  

                // $(A).appendTo(B) : A -> B 안에 마지막 추가             

            });

            $('.delete').click(function(){

                //empty(), detach(),remove()

                // $(this).empty(); 클릭한 것만 사라지고 부모태그는 그대로임.

              //  $(this).parent().parent().empty(); //복사 전체 삭제된다.

              //$(this).parent().detach();  //임시저장 공간에 남겨둔다

              $(this).parent().remove(); //많이쓴다.

            });

        });

    </script>