[JQuery] 동적 li 태그 추가, 삭제 > 학습

<script>
$(function(){
    $(document).ready(function(){
        //li태그 삭제
        $("#listbox .btn_delete").on("click", function(){
            $(this).parent().remove(); //부모객체인 li태그를 삭제
            return false;
        });
        //li태그 추가 - 마지막 li를 복사 후 추가
        $(".btn_add").on("click", function(){
            var newList = $("#listbox > li:last").clone(); // 마지막 li태그 복사
            
            newList.insertAfter($("#listbox > li:last")); //복사한 li를 마지막 순서에 추가
            return false;
        });
    });
 });
</script>

<!--HTML-->
<ul id="listbox" class="listbox">
    <li>contents<a href="#" class="btn btn_delete">삭제</a></li>
    <li>contents<a href="#" class="btn btn_delete">삭제</a></li>
    <li>contents<a href="#" class="btn btn_delete">삭제</a></li>
</ul>

<ul class="form_list">
    <li>
        <a href="#" class="btn btn_add">추가</a>
    </li>
</ul>