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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"rel="stylesheet" /><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet" /><divclass="container"><divclass="row "><divclass="col-md-12 col-sm-12"><formid="formType1"method="post"action="workplan?action=form1S_submit"class="form-horizontal"role="form"><fieldset><divclass="form-group"><divclass="col-md-4 col-sm-4"><labelstyle="font-size: 16px; color: #C0506C;">TITLE</label></div></div><divclass="form-group"><labelfor="inputName"class="col-md-1 col-sm-2 control-label">name1</label><divclass="col-md-1 col-sm-2 col-md-offset-1"><inputmin="0"step="0.1"class="form-control"name=""required=""type="number"></div></div><divclass="form-group"><labelfor="inputName"class="col-md-1 col-sm-2 control-label">name2</label><divclass="col-md-1 col-sm-2 col-md-offset-1"><inputmin="0"step="0.1"class="form-control"name="strofes"required=""type="number"></div><divid="dose1"class="hide"><divclass="col-md-1 col-sm-2 "><inputmin="0"step="0.1"class="form-control"name="strofes"required=""type="number"></div><divclass="col-xs-1"><buttontype="button"class="btn btn-default removeButton6"><iclass="fa fa-minus"></i></button></div></div></div><divclass="form-group"><labelfor="inputName"class="col-md-1 col-sm-2 control-label">name3</label><divclass="col-md-1 col-sm-2"><inputmin="0"step="0.1"class="form-control"name="uesi"required=""type="number"></div><divclass="col-md-offset-1"></div><divid="dose2"class="hide"><divclass="col-md-1 col-sm-2"><inputmin="0"step="0.1"class="form-control"name="uesi"required=""type="number"></div><divclass="col-xs-1"><buttontype="button"class="btn btn-default removeButton6"><iclass="fa fa-minus"></i></button></div></div></div><divclass="form-group"><labelfor="inputName"class="col-md-1 col-sm-2 control-label">name4</label><divclass="col-md-1 col-sm-2"><inputmin="0"step="0.1"class="form-control"name=""required=""type="number"></div><divclass="col-xs-1"><buttontype="button"class="btn btn-default addButton6"><iclass="fa fa-plus"></i></button></div></div></fieldset></form></div></div></div>