[JQuery] DIV 추가/삭제

버튼을 눌렀을 때 인덱스에 해당하는 DIV 레이어 추가/삭제하는 소스 입니다.

jQuery

<script>

$(function(){

$(클릭할버튼).click(function(){

addRow();

});

});

 function addRow(){

var html = "<div class=\"contents_row\"><div class=\"contents_col\"><input type=\"button\" name=\"add_btn\" value=\"+\"></div>";

$(임베드 할 div).append(html);

}

 function delRow(object){

var index = $("#list_detail .contents_row [name=del_btn]").index(object);

$("#list_detail .contents_row").eq(index).remove();

}

</script>

혹은, html 코드에 javascript:onClick 으로 위 함수를 호출해도 상관없습니다.

HTML

<div id="list_detail" style="display:table;"/>

<div class="contents_row" style="display:table-row"/>

<div class="contents_col" style="display:table-cell"/>

<div><input type="button" name="del_btn" value="del" onClick="javascript:delRow(this);/></div>

</div>

</div>

</div>

삭제 함수에서 쓴 인덱스 찾는 부분의 출처는 http://findfun.tistory.com 에 있습니다. 감사합니다.