单击按钮时删除表单域

Question

我有一个表单，其中单个ID entry1 中有6个输入字段。当我单击添加部分按钮时克隆字段并将其添加到表单。 删除上面的部分有一个按钮。

当我点击上面的删除部分时，删除了上述6个输入字段。但我想在每个克隆的表单字段中删除一个删除按钮。当我点击删除时，只删除该特定部分。目前我只有一个删除部分按钮在波纹管形式。 这是我的html表单。

<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，其中id entry1 克隆。

<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>

Answer 1

这应该可行，但是当你删除条目之间时需要实现一些逻辑。它根据您的要求。 例如：如果 Entry1 被删除，则应将 Entry2 替换为条目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>