jQuery动态元素删除所有输入字段

Question

I am working on a form that can handle dynamically added fields, it also styles them according to mobile jquery.

But my problem is that when I set up the remove it removes all the input fields.

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; //initial 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
    $('<div class="ui-grid-a">'+
      '<div class="ui-block-a">'+
        '<div data-role="fieldcontain">'+
          '<label for="hozzavalo">Hozzavalo: </label>'+
          '<input name="hozzavalo[]" id="hozzavalo" type="text">'+
        '</div>'+
      '</div>'+
      '<div class="ui-block-b">'+
        '<div data-role="fieldcontain">'+
          '<label for="mennyiseg">Mennyiseg: </label>'+
          '<input name="mennyiseg[]" type="number"> <span style="margin-left:10px;">lb</span>'+
        '</div>'+
      '</div>'+
      '</div><a href="#" class="remove_field">Remove</a>').appendTo('.input_fields_wrap');//add input box
      $(".input_fields_wrap").trigger("create");
    }
});

$(wrapper).on("click",".remove_field", function(e){
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

I need the $(".input_fields_wrap").trigger("create"); to style the fields, but when I apply it I lose all the fields when I try to remove one.

Answer 1

 $(this).parent('div').remove();

this in this case is your .remove_field element. With your code you remove the parent div of this element which is the whole container. You have to either correctly nest the remove element so it just selects the corresponding field or fix your jquery selector.

Answer 2

To Remove current input fields data Change the structure HTML Add remove link inside the div . HTML :

     <div class="ui-grid-a">
                       <div class="ui-block-a">
                         <div data-role="fieldcontain">
                           <label for="hozzavalo">Hozzavalo: </label>
                           <input name="hozzavalo[]" id="hozzavalo" type="text">
                         </div>
</div>
                       <div class="ui-block-b">
                         <div data-role="fieldcontain">
                           <label for="mennyiseg">Mennyiseg: </label>
                           <input name="mennyiseg[]" type="number"> <span style="margin-left:10px;">lb</span>
                         </div>
                       </div>
                      <a href="#" class="remove_field">Remove</a>
                       </div>


 Jquery Section:


     $(document).on("click",".remove_field", function(e){
                    e.preventDefault(); 
                $(this).parent().remove(); 
             })