통합검색

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();