删除带有按钮的输入表单失败

Remove input forms with button fails

本文关键字：输入 表单 失败 按钮 删除      更新时间：2024-05-27

在这个表单中，有一个添加按钮来添加输入（2个输入）。但是，删除按钮工作不正常。。

我想要的是，使用添加按钮添加的每一个新输入（2个输入），都能够使用删除按钮删除它们（再次为2个）。

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

这是盗版

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>

通过对您的代码进行几次更改，我就可以做到这一点。这些变化是

添加该行

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

对于$('#dose1')和$('#dose2')的两个克隆要在删除按钮上有一个指针，指示稍后单击要删除的div。

以及对删除函数的更改，如下所示。

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

相关文章：