Remove a dynamically added element without using on()

Question

I have a page built in meteor js and i have no access to on(). I have this div

<div class="row crud">

</div

which i am adding elements to it like this

$( ".crud" ).append('<div class="aor"><div class="col-md-3"><div class="form-group"><label>'+v+'    <i class="icon-cancel-square2"></i> </label><input type="text" name="results_'+v+'" class="form-control" placeholder="'+v+'"></div></div></div>');

All form elements have a delete button of the class .icon-cancel-square2

'click .icon-cancel-square2': function(){
    alert('that connected');
    $(this).closest(".form-group").remove();
},

The alert connects but cannot remove. How can i remove an element without necessarily using on?.

Answer 1

With Meteorjs the context of the event is actually the data context of the template so it is the this causing your problems here.

Try:

'click .icon-cancel-square2': function(event, template){ alert('that connected'); event.target.closest('.form-group').remove(); },