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

使用closest - 方法：

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

这样的事可能有用：

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

以下内容将使用 live（）功能绑定到click事件，并删除所选条目。实时函数很方便，因为它意味着任何与选择器匹配的动态添加标记都会在添加时绑定函数。这意味着每次用户单击add_another链接时，新返回的fieldset都具有绑定到remove_fields链接的click事件的函数。

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

jquery $ .get帮助

3 个答案: