통합검색

Javascript

[Jquery] 첨부파일 추가 삭제

  • 2022.11.21 13:52:16
[!]HTML[/!]
 
<div class="_fileWrap w100">
    <div class="fileaddel">
        <input type="file" placeholder="파일을 첨부해주세요.">
        <span class="btns">
            <a href="#" data-fileadd="._fileWrap"><i class="axi axi-plus-circle"></i> 파일 추가</a><hr />
            <a href="#" data-filedel="._fileWrap">파일 삭제</a>
        </span>
    </div>
</div>



[!]CSS[/!]
 
.fileaddel {width: calc(265px + 145px + 20px);position: relative;display: flex;justify-content: space-between;align-items: center;}
.fileaddel .btns {display: flex;align-items: center;}
.fileaddel .btns a {color: #444444;letter-spacing: -1px;}
.fileaddel .btns a i {display: inline-block;vertical-align: -2px;font-size: 18px;color: #999999;}
.fileaddel .btns hr {border: 0;padding: 0;margin: 0 13px;width: 1px;height: 10px;background: #bbb;}



[!]jquery[/!]
 
//file add & del
fileaddel = {
    'init' : function(){
        this.action();
    },
    'action' : function(){
        var $ele = {
            'add' : '*[data-fileadd]',
            'del' : '*[data-filedel]'
        }
        $(document).on('click', $ele.add, function(e){
            e.preventDefault();
            var $wrap = $(this).data('fileadd');
            var $ele = $($wrap).last().clone();

            // console.log($ele);
            $($wrap).last().after($ele);
        })

        $(document).on('click', $ele.del, function(e){
            e.preventDefault();
            var $wrap = $(this).data('filedel');

            $(this).closest($wrap).remove();
        })
    }
}
$(function(){
    if($('*[data-fileadd]').length>0){
        fileaddel.init();
    }
})