CODEWITHSUNDEEP
javascriptjqueryformslivedynamic-forms
thedeepfield
thedeepfield

Reputation: 6196

jQuery .remove() not working for dynamic form

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>

Upvotes: 0

Views: 1324

Answers (3)

MPavesi
MPavesi

Reputation: 971

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.

Upvotes: 0

sha256
sha256

Reputation: 3099

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.

Upvotes: 0

zigdawgydawg
zigdawgydawg

Reputation: 2046

Instead of this:

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

Try this:

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

Upvotes: 3

Related Questions