What is the right way to repeat html controls with a delete

Question

I am trying to make a repeater html textbox controls which will add another field under it with a delete btn. The "+add more" working fine but the delete btn also adding more controls under it.

I want to know the right way to achieve it.

$(function() {

  $('.btn-add-phone').click(function() {
    var sInputGroupPhoneHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Home">Home</option><option value="Mobile">Mobile</option><option value="Other">Other</option></select><span class="input-group-addon input-group-phone-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');

    $(this).append(sInputGroupPhoneHtml);

  });

  $('.btn-add-email').click(function() {
    var sInputGroupEmailHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="email" name="option[]" class="form-control" placeholder="Email" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Personal">Personal</option><option value="Other">Other</option></select><span class="input-group-addon input-group-email-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');

    $(this).append(sInputGroupEmailHtml);

  });

  $('.input-group-email-remove').click(function() {
    $(this).parent().remove();
  });



  jQuery(".toggleControlsPhone a").click(function() {
    jQuery(".showPhoneControls").toggle();
  });

  jQuery(".toggleControlsEmail a").click(function() {
    jQuery(".showEmailControls").toggle();
  });
});

div.input-group-option:last-child input.form-control {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

div.input-group-option span.input-group-addon-remove {
  cursor: pointer;
}

div.input-group-option {
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="form-group" id="phoneAddMore">
  <label class="control-label">Phone</label>
  <div class="form-group form-group-options">
    <div class="input-group input-group-option col-xs-12">
      <input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%">
      <select class="form-control" style="width:50%">
        <option value="Work">Work</option>
        <option value="Home">Home</option>
        <option value="Mobile">Mobile</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <a hre="#" class="btn-add-phone">+ add more </a>
  </div>

  <div class="clearfix"></div>

</div>

View on JSFiddle

showdev · Accepted Answer · 2018-09-07T23:02:47.443

I see two issues:

When you append sInputGroupEmailHtml, you're appending it to the <a> tag that was clicked. So, clicking anywhere inside those elements will bubble up to the <a> tag and fire the event to add a new group. I've changed it to append to the <a> tag's parent .form-group (outside of and after the <a> tag), instead.
When you bind a click handler to .input-group-email-remove, that element does not yet exist in the DOM. (It's only added when you click the "Add More" button.) I've used event delegation to bind the handler to #addPhoneMore rather than the button itself, so that the handler will fire even on dynamically generated children. I'm also using closest() to find the .form-group of the clicked button. See Event binding on dynamically created elements.

$(function() {

  $('.btn-add-phone').click(function() {
  
    var sInputGroupPhoneHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Home">Home</option><option value="Mobile">Mobile</option><option value="Other">Other</option></select><span class="input-group-addon input-group-phone-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');

    $(this).parent().append(sInputGroupPhoneHtml);

  });

  $('#phoneAddMore').on('click', '.input-group-phone-remove', function() {
    $(this).closest('.form-group').remove();
  });

});

div.input-group-option:last-child input.form-control {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

div.input-group-option span.input-group-addon-remove {
  cursor: pointer;
}

div.input-group-option {
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="form-group" id="phoneAddMore">
  <label class="control-label">Phone</label>
  <div class="form-group form-group-options">
    <div class="input-group input-group-option col-xs-12">
      <input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%">
      <select class="form-control" style="width:50%">
        <option value="Work">Work</option>
        <option value="Home">Home</option>
        <option value="Mobile">Mobile</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <a hre="#" class="btn-add-phone">+ add more </a>
  </div>

  <div class="clearfix"></div>

</div>

What is the right way to repeat html controls with a delete

1 Answers1