Question

我正在处理一个可以处理动态添加字段的表单，它还根据移动jquery设置它们的样式。

但我的问题是，当我设置删除时，它会删除所有输入字段。

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

我需要$(".input_fields_wrap").trigger("create");来设置字段的样式，但是当我应用它时，当我尝试删除字段时会丢失所有字段。

Answer 1

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

在这种情况下，这是你的.remove_field元素。使用您的代码，您将删除此元素的父div，这是整个容器。您必须正确嵌套remove元素，以便它只选择相应的字段或修复您的jquery选择器。

Answer 2

删除当前输入字段数据更改结构HTML在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(); 
             })

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

2 个答案: