jQuery .remove() not working for dynamic form

Question

I am creating a dynamic form that allows a user to add/remove text fields. While I can add text fields with no problem, I'm having difficulty removing specific text fields.

Whenever I add additional text fields (say a total of 5), and try to remove any of them except for the first one (say removing field 3). All of them disappear as if the page reloaded. It's as if my jQuery code doesn't run when "Remove Field" is pressed.

<form>
...
  <div id="answers">
    <div class="form-group" id="option1">
      <div class="col-xs-11 col-sm-9 col-md-6"> 
        <input class="form-control" id="answer" placeholder="Answer option">
      </div>
      <div class="col-xs-1 col-sm-1 col-md-1" style="line-height:36px;">
        <a href="" class="remove">Remove Field</span></a>
      </div>
    </div>
  </div>
...
</form>

 <div>
   <a href="" id="add">Add another field</a>
 </div>

jQuery

    <script>
        $(document).ready(function() {

            $( "#add" ).on( "click", function(event) {
                event.preventDefault();                 
                var options = $('#answers .form-group').length + 1;
                $( "#answers div:first" ).clone()
                    .attr('id', 'option' + options)
                .appendTo( "#answers" );

            });

            $( ".remove" ).on( "click", function(event) {
                event.preventDefault();                 
                $(this).closest(".form-group").remove();
            });


        });
    </script>

Answer 1

Instead of this:

$( ".remove" ).on( "click", function(event) {

Try this:

$(document).on("click", ".remove", function(event) {

Answer 2

Try this:

$( "body" ).on( "click", ".remove", function(event) {
      event.preventDefault();                 
      $(this).closest(".form-group").remove();
});

basically you can put any parent of the class remove (which is not dynamically generated) instead of body.

Answer 3

With this:

$(document).ready(function() {
 $( ".remove" ).on( "click", function(event) {
                event.preventDefault();                 
                $(this).closest(".form-group").remove();
            });
}

you are binding the listener to the click event on the "remove" item present on the page at load time.

Every other item added after that time will be without any binded listener.

You should either use the event delegation using the 3 parameters listener

$(document).ready(function() {
 $( "form" ).on( "click", ".remove" ,function(event) {
                event.preventDefault();                 
                $(this).closest(".form-group").remove();
            });
}

The semantic of this declaration consist in binding the event on the full form (which exist at load time), but the event will propagate to the clicked .remove anchor.

If you are using a version of jquery older then 1.7, use delegate

The propagation, or the bubbling, of the events in javascript allow this behaviour.