jQuery - 양식에서 입력 필드 추가/제거

Question

검색 한 결과 내 문제를 해결하기위한 답을 찾을 수 없습니다. 나는 jQuery에 대해 꽤 놀랍다. 두 개의 다른 영역에서 입력 필드를 추가/삭제하려고한다. 내가 추가/제거 (항목을 찾을 수)를 원하는 두 번째 부분을 수용하기 위해 jQuery와 HTML 코드를 편집 해 보았지만 제대로 작동하지 않습니다. 어떤 도움이라도 대단히 감사하겠습니다!

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

문제는, ID input2 만 하나 개의 요소 스크립트가 처음 실행되는 선택 $('#input2' + num2)있다, 그러나 당신의 선택이 찾고있다 id가 input21 인 요소가 존재하지 않습니다.

나는 id와 요소를 클래스 clonedInput2와 마지막 요소를 복제하는 대신에 발견하여 해결

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

데모 : Fiddle