[ 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>
댓글목록
등록된 댓글이 없습니다.