Question

I am building a dynamic form in that the user can keep adding entries until they satisfied, to do this, I use this javascript, to pull in some html,

$('#add_another').click(function(e){
    $.get('/admin/add_grade_course', function(data) {
        $('#added_by_ajax').append(data);
    });
    e.preventDefault();
});

The HTML that is returned is a follows,

<fieldset>
    <select name="course_type">
        <option value="Classroom based learning">Classroom Based Learning</option>
        <option value="Apprenticeship based learning">Aprenticeship Based Learning</option>
        <option value="On the Job Learning">On The Job Learning</option>
    </select>
    <label for="course_names">Course Name</label>
    <input type="text" name="course_names" value="<?php set_value('course_names');?>"/>
    <?php echo form_error('course_names'); ?>

    <label for="course_links">Course Links</label>
    <input type="text" name="course_links" value="<?php set_value('course_links');?>"/>
    <?php echo form_error('course_links'); ?>

    <label for="grade_desc">Description of Grades Needed</label>
    <textarea name="grade_desc"><?php set_value('grade_desc')?></textarea>

    <a href="#" class="remove_fields">Delete</a>


</fieldset>

My question is that as you can see there is nothing unique about the entry form that is created on the fly, if the user has added a new entry field and then decides they dont need it, how would I go about removing the last added form elements?, I assume I need to somehow get the parent fieldset for the clicked .remove_fields link? How would I do that, without selecting all the fieldsets on the page?

Answer 1

The following will bind to the click event using the live() function and remove the selected entry. The live function is handy because it means that any dynamically added markup that matches the selector will have the function bound as it is added. This means that each time the user clicks the add_another link, the newly returned fieldset has the function bound to the click event of its remove_fields link.

$(function(){ //shorthand for $(document).ready(function(){
    $('.remove_fields').live('click', function() {
       //$(this).parent() returns the current fieldset, remove() removes it. 
       $(this).parent().remove();
    });
});