Javascript
DOM 복사 & 삭제
- 2024.09.24 14:57:36
[!]html[/!]
<a href="#" class="btn4" data-dom-class=".domEducation" data-dom-num="0">추가하기<i class="axi axi-plus"></i></a>
<div class="form-align domEducation"> <a href="#" class="btn2 del" data-del-class=".domEducation">삭제</a> <dl class="item w16"> <dt>학교명 <em class="col">*</em></dt> <dd> <input type="text" placeholder="학교명을 입력해주세요."> </dd> </dl> <dl class="item w33"> <dt>재학기간 <em class="col">*</em></dt> <dd class="many-inputs"> <input type="text"> <em class="hipen">~</em> <input type="text"> </dd> </dl> </div> [!]jquery[/!] // 복사 & 삭제
dom_add_del = { 'init' : function(){ this.action(); }, 'action' : function(){ //dom var dom_arr = [ '<div class="form-align domEducation"><a href="#" class="btn2 del" data-del-class=".domEducation">삭제</a><dl class="item w16"><dt>학교명 <em class="col">*</em></dt><dd><input type="text" placeholder="학교명을 입력해주세요."></dd></dl><dl class="item w33"><dt>재학기간 <em class="col">*</em></dt><dd class="many-inputs"><input type="text"><em class="hipen">~</em><input type="text"></dd></dl><dl class="item w16"><dt>전공 <em class="col">*</em></dt><dd><input type="text" placeholder="전공을 입력해주세요."></dd></dl><dl class="item w16"><dt>소재지 <em class="col">*</em></dt><dd><input type="text" placeholder="소재지를 입력해주세요."></dd></dl><dl class="item w16"><dt>비고</dt><dd><input type="text"></dd></dl></div>', 'html 작성해주세요', 'html 작성해주세요' ]; //add $('*[data-dom-class]').on({ 'click' : function(e){ e.preventDefault(); var cname = $(this).data('dom-class'); var num = $(this).data('dom-num'); $(cname).last().after(dom_arr[num]); } }) //del $(document).on('click', '*[data-del-class]', function(e){ e.preventDefault(); var cname = $(this).data('del-class'); $(this).closest(cname).remove(); }) } } dom_add_del.init(); |