jQuery - Ajout/suppression de champs de saisie dans le formulaire

Question

J'ai recherché et je n'ai pas trouvé de réponse pour résoudre mon problème ici. Je suis assez novice avec jQuery, et je cherche à ajouter/supprimer des champs d'entrée de deux zones différentes. J'ai essayé d'éditer mon code jQuery et HTML pour accommoder la deuxième partie que je veux ajouter/supprimer (les éléments trouvés), mais je ne peux pas le faire fonctionner. Toute aide serait grandement appréciée!

jQuery:

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#btnAdd2').click(function() { 
       var num2  = $('.clonedInput2').length; //  how many "duplicatable" input fields we currently have 
       var newNum = new Number(num2 + 1);  // the numeric ID of the new input field being added 

      // create the new element via clone(), and manipulate it's ID using newNum value 
      var newElem2 = $('#input2' + num2).clone().attr('id', 'input2' + newNum); 

      // manipulate the name/id values of the input inside the new element 
      newElem2.children(':first').attr('id', 'name' + newNum).val(null); 

      // insert the new element after the last "duplicatable" input field 
      $('#input2' + num2).after(newElem2); 

      // enable the "remove" button 
      $('#btnDel2').attr('disabled',''); 

     }); 

     $('#btnDel2').click(function() { 
      var num = $('.clonedInput2').length; // how many "duplicatable" input fields we currently have 
      $('#input2' + num).remove();  // remove the last element 

      // enable the "add" button 
      $('#btnAdd2').attr('disabled',''); 

      // if only one element remains, disable the "remove" button 
      if (num-1 == 1) 
       $('#btnDel2').attr('disabled','disabled'); 
     }); 

     $('#btnDel2').attr('disabled','disabled'); 
    }); 
</script> 

HTML:

<form id="myForm" action="process_call.php" method="post"> 
     <div id="input1" style="margin-bottom:4px;" class="clonedInput"> 
      Charge: <input type="text" name="name[]" id="name1" /> 
     </div> 
     <div> 
      <input type="button" id="btnAdd" value="Add Another Charge" /> 
      <input type="button" id="btnDel" value="Remove Charge" /> 
     </div> 

     <div id="input2" style="margin-bottom:4px;" class="clonedInput2"> 
      Item Found: <input type="text" name="item[]" id="item1" /> 
     </div> 
     <div> 
      <input type="button" id="btnAdd2" value="Add Another Item" /> 
      <input type="button" id="btnDel2" value="Remove Item" /> 
     </div> 
     <input type="submit"> 
    </form> 

Answer 1

Le problème a été le sélecteur $('#input2' + num2) lorsque le script est exécuté en premier, il n'y a qu'un élément avec id input2, mais votre sélection est à la recherche de un élément avec l'ID input21 qui ne se termine pas.

Je l'ai fixé en clonant le dernier élément à la classe clonedInput2 au lieu de trouver l'élément avec id

jQuery(function($) { 
    $('#btnAdd2').click(function() { 
     var num2 = $('.clonedInput2').length; //  how many "duplicatable" input fields we currently have 
     var newNum = num2 + 1; // the numeric ID of the new input field being added 

     // create the new element via clone(), and manipulate it's ID using newNum value 
     var newElem2 = $('.clonedInput2:last').clone().attr('id', 'input2' + newNum); 

     // manipulate the name/id values of the input inside the new element 
     newElem2.children(':first').attr('id', 'name' + newNum).val(null); 

     // insert the new element after the last "duplicatable" input field 
     $('.clonedInput2:last').after(newElem2); 

     // enable the "remove" button 
     $('#btnDel2').prop('disabled', false); 

    }); 

    $('#btnDel2').click(function() { 
     var num = $('.clonedInput2').length; // how many "duplicatable" input fields we currently have 
     $('#input2' + num).remove(); // remove the last element 

     // enable the "add" button 
     $('#btnAdd2').attr('disabled', ''); 

     // if only one element remains, disable the "remove" button 
     if (num - 1 == 1) $('#btnDel2').attr('disabled', 'disabled'); 
    }); 

    $('#btnDel2').attr('disabled', 'disabled'); 
}); 

Démo: Fiddle