Справка jquery $ .get

Question

Я создаю динамическую форму, в которой пользователь может продолжать добавлять записи до тех пор, пока они не будут удовлетворены. Для этого я использую этот javascript, чтобы добавить html,

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

HTML-код, который возвращается, следующий:

<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>

Мой вопрос заключается в том, что, как вы можете видеть, нет ничего уникального в форме ввода, которая создается на лету, если пользователь добавил новое поле ввода, а затем решил, что он не нужен, как бы я удалил последние добавленные элементы формы ?, я предполагаю, что мне нужно каким-то образом получить родительский набор полей для нажатой ссылки .remove_fields? Как бы я это сделал, не выбрав все наборы полей на странице?

Answer 1

Используйте ближайший -метод:

// 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

Следующая команда будет привязана к событию click с помощью функции live () и удалит выбранную запись.Функция live удобна, потому что это означает, что любая динамически добавленная разметка, которая соответствует селектору, будет иметь функцию, привязанную при добавлении.Это означает, что каждый раз, когда пользователь щелкает ссылку add_another, у вновь возвращаемого набора полей функция связывается с событием click его ссылки remove_fields.

Answer 3

Примерно так может работать:

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