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 th

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