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

본문 바로가기

사이트 내 전체검색

395,792명이 방문해 주셨습니다.

[  JQUERY  ] [JQuery] 동적 li 태그 추가, 삭제

작성일 20-03-01 16:19

페이지 정보

작성자최고관리자 조회 321회 댓글 0건

본문

<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>

댓글목록

등록된 댓글이 없습니다.

Copyright © 소유하신 도메인. All rights reserved.