jquery $.get help

Question

Hello There,

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

Use the closest-method:

// Add a delegated click-handler for clicks on remove-links
$('body').delegate('a.remove_fields', 'click',
   // In the event handler, remove the fieldset this link belongs to
   function (e) {
      // this refers to the link that was clicked.
      // closest traverse the DOM upwards until it finds an ancestor
      // matching the selector. (i.e. a fieldset).
      // After we find this ancestor, we remove it from the DOM.
      $(this).closest('fieldset').remove();
   }
);

Answer 2

Something like this might work:

var form_counter = 0;
$('#add_another').click(function(e){
    $.get('/admin/add_grade_course', function(data) {
        $(data).attr('id', 'form_' + form_counter);
        var form_count_ref = form_counter;
        $('a:last', data).onclick(function(){
               $('form_' + form_count_ref).remove();
        });
        form_counter++;
        $('#added_by_ajax').append(data);
    });
    e.preventDefault();
});

Answer 3

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();
    });
});