jQuery dynamic input fields

Question

I am using this code to add and remove input fields: http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery

Two issues I am facing that I haven't been able to solve:

$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>');

I want to append a div within a div like so (I am using bootstrap):

$(wrapper).append('<div class="form-group"><input type="text" class="form-control" "name="mytext[]" placeholder="test"><div class="input-group"><span class="input-group-addon"><span class="wb-close"></span></span></div></div>');

This works, obviously, but then my close function doesn't work anymore since it is trying to close the second div, not the "main" div (the <div class="form-group">. How would I be able to close the whole added div like in my example above?

Second issue, I am using the following as my close function:

<div class="input-group"><span class="input-group-addon"><span class="wb-close"></span></span></div>

But the close button doesn't work with the span icon wb-close, it just won't close. I tried adding the remove_field class to the span itself, but that also didn't work.

To find out why your handlers aren't working we'd need to see the JS since it also matters how the events are bound to the elements, e.g. Are you using document ready so that the DOM is atleast loaded, are you using specific classes in the $([selector]).on call? — SidOfc
– SidOfc, Commented Feb 23, 2016 at 13:32

Rodrigo Kiguti · Accepted Answer · 2016-02-23 13:41:12Z

1

You need to change the selectors, because you changed the class name.

Try this:

$(wrapper).on("click", ".wb-close", function(e) {
    $(this).parent('.form-group').remove(); x--;
});

Or:

$(wrapper).on("click", ".wb-close", function(e) {
    $(this).parent().parent().parent().remove(); x--;
});

answered Feb 23, 2016 at 13:41

Rodrigo Kiguti

5421 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hardist Over a year ago

Thanks, the second option worked, I did try the first option myself. Solved both issues with this :)

Siva Kumar Siddam · Accepted Answer · 2016-02-23 13:52:19Z

1

Try this

$(function(){
$("#btn-add").click(function(){
  $("#wrapper").append('<div><input type="text" name="mytext[]"/><a href="#"              class="remove_field">Remove</a></div>');
      $("#wrapper").find("a").unbind("click");
     $("#wrapper").find("a").click(function(){
       $(this).parent().remove();      
     });      
  });
});


 <button id="btn-add">Add </button>
<div id="wrapper"></div>

answered Feb 23, 2016 at 13:52

Siva Kumar Siddam

1546 bronze badges

Collectives™ on Stack Overflow

jQuery dynamic input fields

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related