Javascript删除字段

Javascript Remove field

本文关键字：字段 删除 Javascript      更新时间：2023-09-26

我正在尝试使用Javascript添加删除表单上字段的功能，但它不起作用。我已经在下面评论掉了我的"删除"字段。我该怎么修？

    $(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append("<div><select name='tournament_id_" + x + "'> <%=j(options_from_collection_for_select(Tournament.all.where(tour_id: 1), 'id', 'event'))%></select></div>")

        // <a href="#" class="remove_field">Remove</a></div>'") //add input box
    }
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

您有许多错误

JSFiddel

    $(document).ready(function(){var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
add_button.click(function (e) { //on add input button click
   if ($(".containers").length < 11 ) { //max input box allowed
        x++; //text box increment
        wrapper.append('<div id="container_' + x + '" class="containers"><select name="tournament_id_' + x + '"><option>1</option> </select><a href="javascript:void(0)" class="remove_field" data-id="' + x + '">Remove</a></div><br>') //add input box
    }
});
wrapper.on("click", ".remove_field", function (e) { //user click on remove text
    id = $(this).attr('data-id');
    $("#container_" + x).remove();
    x--;});});
相关文章：