使用按钮删除输入表单失败

时间：2016-04-12 06:49:03

标签： javascript jquery

在这种形式中，有一个添加按钮来添加输入（2个输入）。然而，删除按钮无法正常工作..

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

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

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

1 个答案:

答案 0 :(得分：1)

通过对代码进行一些更改，我得到了这个功能。这些变化是

添加此行

  $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
});

以下是工作代码段。

＆＃13;
＆＃13; 
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();
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题