Remove input forms with button fails

Question

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>

It's not clear how you want this to work. You're adding elements to a form-group, and at remove, you're removing the entire group - $row.remove(). It appears to be doing that correctly. Do you want your code to do something else? What, and how have you tried to achieve that? — David Hedlund
– David Hedlund, Commented Apr 12, 2016 at 6:55
What does the remove button supposed to do...please describe what you want this code to do... — SamGhatak
– SamGhatak, Commented Apr 12, 2016 at 6:56

Rajshekar Reddy · Accepted Answer · 2016-04-12 07:27:06Z

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>

Collectives™ on Stack Overflow

Remove input forms with button fails

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related