Jquery dynamische Elemente entfernen alle Eingabefelder

Question

Ich arbeite an einem Formular, das dynamisch hinzugefügte Felder verarbeiten kann, es formatiert sie auch entsprechend Mobile Jquery.

Aber mein Problem ist, dass wenn ich die Entfernung eingerichtet, entfernt es alle Eingabefelder.

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

Ich brauche die $(".input_fields_wrap").trigger("create"); die Felder, um Stil, aber wenn ich es anwenden verliere ich alle Felder wenn ich versuche, ein zu entfernen.

Answer 1

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

Dies ist in diesem Fall Ihr .remove_field-Element. Mit Ihrem Code entfernen Sie das übergeordnete div dieses Elements, das der gesamte Container ist. Sie müssen das remove-Element korrekt verschachteln, damit es nur das entsprechende Feld auswählt oder Ihren jquery-Selektor korrigiert.

Answer 2

Um aktuelle Eingabefelder Daten zu entfernen Ändern Sie die Struktur HTML Hinzufügen entfernen Link innerhalb der 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(); 
      })