JQuery 편집하기 (부분)

=== 동적 폼 필드 추가/제거 ===

<syntaxhighlight lang="html">
<form id="dynamic-form">
    <div class="field-group">
        <input type="text" name="items[]" placeholder="항목을 입력하세요">
        <button type="button" class="remove-field">제거</button>
    </div>
    <button type="button" id="add-field">필드 추가</button>
    <button type="submit">제출</button>
</form>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
$(document).ready(function() {
    var fieldIndex = 1;
    
    // 필드 추가
    $('#add-field').click(function() {
        var newField = $(`
            <div class="field-group">
                <input type="text" name="items[]" placeholder="항목을 입력하세요">
                <button type="button" class="remove-field">제거</button>
            </div>
        `);
        
        $(this).before(newField);
        newField.find('input').focus();
        fieldIndex++;
    });
    
    // 필드 제거 (이벤트 위임 사용)
    $(document).on('click', '.remove-field', function() {
        var $fieldGroup = $(this).closest('.field-group');
        
        if ($('.field-group').length > 1) {
            $fieldGroup.fadeOut(300, function() {
                $(this).remove();
            });
        } else {
            alert('최소 하나의 필드는 있어야 합니다.');
        }
    });
    
    // 폼 제출
    $('#dynamic-form').submit(function(e) {
        e.preventDefault();
        
        var items = [];
        $('input[name="items[]"]').each(function() {
            var value = $(this).val().trim();
            if (value) {
                items.push(value);
            }
        });
        
        console.log('제출된 항목들:', items);
        
        if (items.length === 0) {
            alert('최소 하나의 항목을 입력하세요.');
            return;
        }
        
        // 실제 서버 전송
        $.post('/submit', { items: items })
            .done(function(response) {
                alert('성공적으로 제출되었습니다!');
            })
            .fail(function() {
                alert('제출 중 오류가 발생했습니다.');
            });
    });
});
</syntaxhighlight>