jQuery로 동적 폼 생성하기

동적 폼 생성하기

• 위와 같은 폼이 있을 때, 추가 버튼을 클릭해서 경력사항 칸을 추가하고 삭제 버튼을 눌러 삭제해 보도록 하자.

<div class="row mb-3">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h4>입력폼<button class="btn btn-outline-primary btn-sm float-end" id="btn-add-field">추가</button></h4>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">이름</label>
                    <input type="text" class="form-control"/>
                </div>
                <div class="mb-3">
                    <label class="form-label">경력사항</label>
                    <div class="mb-3 d-flex justify-content-between">
                        <input type="text" class="form-control w-75"/>
                    </div>
                    <div class="mb-3 d-flex justify-content-between">
                        <input type="text" class="form-control w-75"/>
                        <button class="btn btn-outline-danger btn-sm">삭제</button>							
                    </div>
                </div>
                <!-- 새 경력사항이 추가될 곳 -->
            </div>
        </div>
    </div>
</div>
<script>
// id가 btn-add-field인 엘리먼트를 선택했을 때 실행되는 함수 등록하기
$('btn-add-field').click(function() {
    var template = `<div class="mb-3 d-flex justify-content-between">
			<input type="text" class="form-control w-75"/>
			<button class="btn btn-outline-danger btn-sm">삭제</button></div>`;

    // class가 card-body인 엘리먼트 안에 있는, 
    // class가 mb-3인 엘리먼트 중 제일 마지막번째 엘리먼트를 선택 후 그 밑에 template를 붙인다
    $('.card-body .mb-3:last').after(template);  
});

// $(this)는 내가 선택한 객체인 .btn-outline-danger 객체이다
// closest()는 가장 가까운 조상 엘리먼트를 조회한다
// 삭제 버튼을 클릭했을 때 가장 가까운 .mb-3를 찾아서 그 div를 삭제한다
$('.card-body').on('click', '.btn-outline-danger', function() {
		$(this).closest('.mb-3').remove();
});
</script>