jQuery - Form Field Cloning and Removal

by Justin Breen

HTML

<form method="post" action="#">
    
    <label>Exercises</label>
    
    <fieldset id="exercises">
        <div class="exercise">
            <input type="text" name="exercise[]">
            <button class="remove">x</button>
        </div>
    </fieldset>
            
    <button id="add_exercise">add exercise</button>
    
</form>

JavaScript

//Clone and Remove Form Fields

$('#add_exercise').on('click', function() { 
    $('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><button class="remove">x</button></div>');
    return false; //prevent form submission
});

$('#exercises').on('click', '.remove', function() {
    $(this).parent().remove();
    return false; //prevent form submission
});