Add click event to a dynamically added element using jQuery

Question

I have the HTML below:

<td id="tppBox">
     <div>                                
       <input name="tpp[]" type="text" style="width:90%"/>
       <a id="addtpp" class="small-button btn">+</a>
     </div>
</td>

and the JavaScript code:

$(document).ready(function(){
    $('#addtpp').click(function(){

        var box = $("#tppBox");  
        box.append("<div><input name='tpp[]' type='text' style='width:90%'></input> \n\
             <a class='small-button btn removetpp'>-</a></div>");
    });

    $(".removetpp").on('click',function(){
        $(this).parent().remove();
    }); 
});

Although input fields with - are added, when I press - to delete nothing happens! What am I doing wrong?

Thanks in advance!

Answer 1

.removetpp doesn't exist in the DOM when you are attempting to attach your event listener: you need to delegate your event.

Assuming #tppBox is a static container:

$("#tppBox").on('click', '.removetpp', function(){
    $(this).parent().remove();
});