ボタンをクリックするとフォームフィールドが削除されます

Question

フォームには、1つのIDに6つの入力フィールドがありますエントリ1です。クリックしたときセクションを追加ボタンフィールドが複製され、フォームに追加されます。の上のセクションを削除するボタンがです。

上記の[削除]セクションをクリックして、上記の6つの入力フィールドを削除しました。クローンされたフォームフィールドのすべてのボタンを削除する必要があります。削除をクリックすると、その特定のセクションのみが削除されます。現在、私は蛇の形でセクションボタンを1つだけ削除しています。 これは私のhtml形式です。クローン化されたID entry1をによって

<div class="col-md-12"> 
      <div id="entry1" class="clonedInput col-md-12"> 
      <h5 id="reference" name="reference" class="heading-reference">Entry #1</h5> 
      <div class="col-md-2"> 
      <div class="form-group"> 
       <label class="label_item" for="ID_1_item">Item</label> 
       <input type="text" class="input_item form-control" name="ID_1_item" id="ID_1_item"> 

        </div> 
      </div> 

      <div class="col-md-2"> 
       <div class="form-group"> 
       <label class="label_place" for="ID_1_place">Place</label> 
       <input class="input_place form-control" type="text" name="ID_1_place" id="ID_1_place" value=""> 
       </div> 
      </div> 

      <div class="col-md-2"> 
       <div class="form-group"> 
       <label class="label_slip_no" for="ID_1_slip_no">BCMS Test Slip No.</label> 
       <input class="input_slip_no form-control" type="text" name="ID_1_slip_no" id="ID_1_slip_no" value=""> 
       </div> 
      </div> 

      <div class="col-md-2"> 
       <label class="label_result" for="ID_1_result">Result</label> 
       <select class="input_result form-control" name="ID_1_result" id="ID_1_result"> 
        <option value="OK">OK</option> 
        <option value="Failed">Failed</option> 
       </select> 

      </div> 

      <div class="col-md-2"> 
       <label class="label_reason" for="ID_1_reason">Reason</label> 
       <textarea class="input_reason form-control" type="text" name="ID_1_reason" id="ID_1_reason" ></textarea> 
      </div> 
      <div class="col-md-2"> 
      <label class="label_pdf" for="ID_1_pdf">Upload Report</label> 
      <input class="form-control input_pdf" type = "file" name = "ID_1_pdf" id="ID_1_pdf" size = "20" required="" /> 
      </div> 
     </div><!-- end #entry1 --> 

     <div id="addDelButtons col-md-12"> 
      <input class="btn btn-success" type="button" id="btnAdd" value="add section"> <input class="btn btn-danger" type="button" id="btnDel" value="remove section above"> 
     </div> 
     </div> 
     <!-- /.row --> 
    </div> 
    <div class="box-footer"> 
    <input type="submit" name="submit" value="Submit" class="btn btn-success"> 
    </div> 

私のjQuery。

<script type="text/javascript"> 

$(function() { 
$('#btnAdd').click(function() { 
    var num  = $('.clonedInput').length, // how many "duplicatable" input fields we currently have 
     newNum = new Number(num + 1),  // the numeric ID of the new input field being added 
     newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value 
// manipulate the name/id values of the input inside the new element 
    // H2 - section 
    newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Entry #' + newNum); 

    // Title - select 
    newElem.find('.label_item').attr('for', 'ID_' + newNum + '_item'); 
    newElem.find('.input_item').attr('id', 'ID_' + newNum + '_item').attr('name', 'ID_' + newNum + '_item').val(''); 

    // First name - text 
    newElem.find('.label_place').attr('for', 'ID_' + newNum + '_place'); 
    newElem.find('.input_place').attr('id', 'ID_' + newNum + '_place').attr('name', 'ID_' + newNum + '_place').val(''); 

    // Last name - text 
    newElem.find('.label_slip_no').attr('for', 'ID_' + newNum + '_slip_no'); 
    newElem.find('.input_slip_no').attr('id', 'ID_' + newNum + '_slip_no').attr('name', 'ID_' + newNum + '_slip_no').val(''); 

    // Color - checkbox 
    newElem.find('.label_result').attr('for', 'ID_' + newNum + '_result'); 
    newElem.find('.input_result').attr('id', 'ID_' + newNum + '_result').attr('name', 'ID_' + newNum + '_result').val([]); 

    // Skate - radio 
    newElem.find('.label_reason').attr('for', 'ID_' + newNum + '_reason'); 
    newElem.find('.input_reason').attr('id', 'ID_' + newNum + '_reason').attr('name', 'ID_' + newNum + '_reason').val([]); 
    // Skate - radio 
    newElem.find('.label_pdf').attr('for', 'ID_' + newNum + '_pdf'); 
    newElem.find('.input_pdf').attr('id', 'ID_' + newNum + '_pdf').attr('name', 'ID_' + newNum + '_pdf').val([]); 


// insert the new element after the last "duplicatable" input field 
    $('#entry' + num).after(newElem); 
    $('#ID' + newNum + '_title').focus(); 

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

// right now you can only add 5 sections. change '5' below to the max number of times the form can be duplicated 
    var test = document.getElementById('tstquantity').value; 
    if (newNum == test) 
    $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); 
}); 

$('#btnDel').click(function() { 
// confirmation 
    if (confirm("Are you sure you wish to remove this section? This cannot be undone.")) 
     { 
      var num = $('.clonedInput').length; 
      // how many "duplicatable" input fields we currently have 
      $('#entry' + num).slideUp('slow', function() {$(this).remove(); 
      // if only one element remains, disable the "remove" button 
       if (num -1 === 1) 
      $('#btnDel').attr('disabled', true); 
      // enable the "add" button 
      $('#btnAdd').attr('disabled', false).prop('value', "add section");}); 
     } 
    return false; 
     // remove the last element 

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

$('#btnDel').attr('disabled', true); 

}); 

</script>