使用按钮删除输入表单失败 [英] Remove input forms with button fails

问题描述

在此表单中，有一个添加按钮以添加输入(2个输入).但是，删除"按钮无法正常工作..

In this form, there is an add button to add inputs (2 inputs). The remove button however is not working properly..

我想要的是，每个使用添加按钮添加的新输入(2个输入)都能够通过删除按钮将其删除(再次2个).

What I want is, every new input (2 inputs) that are added with the add button, to be able to remove them (2 again) as well with the remove button.

现在，删除"按钮不会删除已添加的2个输入.

Now the remove button doesn't remove the 2 inputs that were added.

这是 bootply

var counter6=0;

$('#formType1')
.on('click', '.addButton6', function() {
        counter6++;
        var $template = $('#dose1'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose1-index', counter6)
                        .insertBefore($template);
                
        // Update the name attributes
        $clone
            .find('[name="strofes"]').attr('name', 'strofes-' + counter6).end();
            
         var $template = $('#dose2'),
        $clone    = $template
                        .clone()
                        .removeClass('hide')
                        .removeAttr('id')
                        .attr('data-dose2-index', counter6)
                        .insertBefore($template);
                    
          $clone
            .find('[name="uesi"]').attr('name', 'uesi-' + counter6).end();   
    })

    // Remove button click handler
    .on('click', '.removeButton6', function() {
        counter6 = counter6-1;
        var $row  = $(this).parents('.form-group'),
            index = $row.attr('data-dose1-index');
            
        // Remove element containing the fields
        $row.remove();
       
       
    });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
 <div class="row ">
            <div class="col-md-12 col-sm-12">
                <form id="formType1" method="post" action="workplan?action=form1S_submit" class="form-horizontal" role="form">
                <fieldset>
                    <div class="form-group">
                        <div class="col-md-4 col-sm-4">
                            <label style="font-size: 16px; color: #C0506C;">TITLE</label>
                        </div>
                    </div>
                   
                    <div class="form-group">  
                      <label for="inputName" class="col-md-1 col-sm-2 control-label">name1</label>
                      <div class="col-md-1 col-sm-2 col-md-offset-1">                      
                          <input min="0" step="0.1" class="form-control" name="" required="" type="number">
                      </div>
                          
                    </div>
                    
                    <div class="form-group">  
                      <label for="inputName" class="col-md-1 col-sm-2 control-label">name2</label>
                      <div class="col-md-1 col-sm-2 col-md-offset-1">                      
                          <input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
                      </div>
                      <div id="dose1" class="hide">
                        <div class="col-md-1 col-sm-2 ">                      
                           <input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
                        </div>
                        <div class="col-xs-1">
                             <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
                         </div>
                      </div>
                      
                      
                    </div>
                    
                    <div class="form-group">  
                    <label for="inputName" class="col-md-1 col-sm-2 control-label">name3</label>
                      <div class="col-md-1 col-sm-2">                      
                          <input min="0" step="0.1" class="form-control" name="uesi" required="" type="number">
                      </div>
                      <div class="col-md-offset-1"> </div>
                          <div id="dose2" class="hide">
                             <div class="col-md-1 col-sm-2">                      
                                 <input min="0" step="0.1" class="form-control" name="uesi" required="" type="number">
                             </div>
                             <div class="col-xs-1">
                                 <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i></button>
                              </div>
                          </div>
                          
                    </div>
                     
                    <div class="form-group">  
                      
                      <label for="inputName" class="col-md-1 col-sm-2 control-label">name4</label>
                      <div class="col-md-1 col-sm-2">                      
                          <input min="0" step="0.1" class="form-control" name="" required="" type="number">
                      </div>
                      
                      <div class="col-xs-1">
                            <button type="button" class="btn btn-default addButton6"><i class="fa fa-plus"></i></button>
                      </div> 
                    </div>
</fieldset>
 </form>
               </div>
                    </div></div>

推荐答案

通过对您的代码进行了几处更改，我可以正常工作了.更改是

With couple of changes to your code I got this working . The changes are

添加此行

  $clone.find('.removeButton6').data('to-remove', counter6);

同时显示$('#dose1')和$('#dose2')的克隆，在删除"按钮上有一个指针，以指示稍后单击该div将要删除的div.

To both your clones of $('#dose1') and $('#dose2') To have a pointer on the remove buttons to say which div's to be removed later on click of it.

以及对删除功能的更改，如下所示.

And changes to your remove function like below.

// Remove button click handler
.on('click', '.removeButton6', function() {
  counter6 = counter6 - 1;
  var indexToRemove = $(this).data('to-remove'); // get the value set in the above code.

  $('[data-dose1-index="' + indexToRemove + '"]').remove(); //remove dose1 of that value

  $('[data-dose2-index="' + indexToRemove + '"]').remove(); // remove dose2 of that value
});

下面是有效的代码段.

var counter6 = 0;

$('#formType1')
  .on('click', '.addButton6', function() {
    counter6++;
    var $template = $('#dose1'),
      $clone = $template
      .clone()
      .removeClass('hide')
      .removeAttr('id')
      .attr('data-dose1-index', counter6)
      .insertBefore($template);

    // Update the name attributes
    $clone
      .find('[name="strofes"]').attr('name', 'strofes-' + counter6).end();

    $clone.find('.removeButton6').data('to-remove', counter6); // add this counter for later removing it

    var $template = $('#dose2'),
      $clone = $template
      .clone()
      .removeClass('hide')
      .removeAttr('id')
      .attr('data-dose2-index', counter6)
      .insertBefore($template);

    $clone
      .find('[name="uesi"]').attr('name', 'uesi-' + counter6).end();

    $clone.find('.removeButton6').data('to-remove', counter6); // add this counter for later removing it
  })

// Remove button click handler
.on('click', '.removeButton6', function() {
  counter6 = counter6 - 1;
  var indexToRemove = $(this).data('to-remove');

  $('[data-dose1-index="' + indexToRemove + '"]').remove();

  $('[data-dose2-index="' + indexToRemove + '"]').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row ">
    <div class="col-md-12 col-sm-12">
      <form id="formType1" method="post" action="workplan?action=form1S_submit" class="form-horizontal" role="form">
        <fieldset>
          <div class="form-group">
            <div class="col-md-4 col-sm-4">
              <label style="font-size: 16px; color: #C0506C;">TITLE</label>
            </div>
          </div>

          <div class="form-group">
            <label for="inputName" class="col-md-1 col-sm-2 control-label">name1</label>
            <div class="col-md-1 col-sm-2 col-md-offset-1">
              <input min="0" step="0.1" class="form-control" name="" required="" type="number">
            </div>

          </div>

          <div class="form-group">
            <label for="inputName" class="col-md-1 col-sm-2 control-label">name2</label>
            <div class="col-md-1 col-sm-2 col-md-offset-1">
              <input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
            </div>
            <div id="dose1" class="hide">
              <div class="col-md-1 col-sm-2 ">
                <input min="0" step="0.1" class="form-control" name="strofes" required="" type="number">
              </div>
              <div class="col-xs-1">
                <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i>
                </button>
              </div>
            </div>


          </div>

          <div class="form-group">
            <label for="inputName" class="col-md-1 col-sm-2 control-label">name3</label>
            <div class="col-md-1 col-sm-2">
              <input min="0" step="0.1" class="form-control" name="uesi" required="" type="number">
            </div>
            <div class="col-md-offset-1"></div>
            <div id="dose2" class="hide">
              <div class="col-md-1 col-sm-2">
                <input min="0" step="0.1" class="form-control" name="uesi" required="" type="number">
              </div>
              <div class="col-xs-1">
                <button type="button" class="btn btn-default removeButton6"><i class="fa fa-minus"></i>
                </button>
              </div>
            </div>

          </div>

          <div class="form-group">

            <label for="inputName" class="col-md-1 col-sm-2 control-label">name4</label>
            <div class="col-md-1 col-sm-2">
              <input min="0" step="0.1" class="form-control" name="" required="" type="number">
            </div>

            <div class="col-xs-1">
              <button type="button" class="btn btn-default addButton6"><i class="fa fa-plus"></i>
              </button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

这篇关于使用按钮删除输入表单失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！