Remove input forms with button fails

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

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.

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

here is the 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>

Answers 1

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

    Adding this line

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

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

    Below is the working snippet.

    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>


Related Articles