JQuery creating divs and associated buttons on the fly

Question

I'm creating text fields each time a button is clicked, with each new div I create I also want to give it a button to delete this field. As can be seen in this JSFiddle.

However the button associated with each newly created div doesn't delete it's associated field. How can this delete that text fields?

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — emerson.marini, Aug 29 '14 at 18:33

score 2 · Accepted Answer · answered Aug 29 '14 at 18:35

2

You have to use delegation. This works for the elements new to the DOM, after it was already loaded.

$(document).on('click','.deleteButton',function(){
    $(this).closest('.form-group').hide();//remove
});

JSFiddle

Note: I added deleteButton class to the dynamically inserted buttons.

answered Aug 29 '14 at 18:35

Luigi Siri

2,068
2
19
27

Thanks. How could you clear down the values as well as hiding the fields to? – user94628 Aug 29 '14 at 19:30
@user94628 Using `.remove()` instead. – Luigi Siri Aug 29 '14 at 19:33

score 2 · Answer 2 · answered Aug 29 '14 at 18:52

2

You can set in your button an onclick function and handle delete there like following:

window.deleteRow = function(obj){
    $(obj).parent().remove();
}

fiddle

answered Aug 29 '14 at 18:52

Alex Char

32,879
9
49
70

JQuery creating divs and associated buttons on the fly

2 Answers2