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"); 필요하지만, 나는 그것을 적용 할 때 내가 하나를 제거하려고 할 때 모든 필드를 잃게됩니다.

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