Jqueryの動的要素はすべての入力フィールドを削除します

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");が必要ですが、私はそれを適用するときに私は1つを削除しようとしたとき、私はすべてのフィールドを失います。

Answer 1

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

この場合、これはあなたの.remove_field要素です。あなたのコードでは、コンテナ全体であるこの要素の親divを削除します。 remove要素を適切にネストして、対応するフィールドを選択するか、jqueryセレクタを修正するだけです。

Answer 2

現在の入力フィールドデータを削除する 構造を変更するHTML div内のリンクを削除します。 HTML：ラッパーの直接の子として挿入されて.remove_field`あなたの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(); 
      })