单击按钮时删除表单域

1 回答

• 1

  这应该可行，但是在 entry 被删除之间需要实现一些逻辑 . 它根据您的要求 . 例如：如果删除 Entry1 ，则应将 Entry2 替换为 Entry 1 或者让计数器值继续 . 这就是我提到你的要求的原因 .

  $(function () {
    debugger
  $('#btnAdd').click(function () {
      var num     = Number($('.clonedInput').last().attr('id').substr(5)), // 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(true).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
              debugger
              
      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);
      $('.rowDelBtn').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 = 5;
      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);
      $('.rowDelBtn').attr('disabled', false);
  });
  
  $('#btnDel').attr('disabled', true);
    $('.rowDelBtn').attr('disabled', true);
    
  $('.rowDelBtn').click(function(){
    if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
          {
              $(this).parent('div.clonedInput').remove();
            
          }
      return false;
  });
    
  });
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div class="col-md-12">
            <div id="entry1" class="clonedInput col-md-12">
              <h5 id="reference" name="reference" class="heading-reference">Entry #1</h5>
              <input class="btn btn-danger rowDelBtn" type="button" value="x">
              <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>
  

  回复于 2024-05-02T20:02:48+08:00