Delete dynamic row created dynamically

I have a button which has a class.

By clicking on it I do add some row in my table.

 $('.add_line_tel').click(function(){
            $('#product-table tr:last').after('<tr class="">'
                +'<td><input type="text"  name="tel1" ></td>'
                +'<td style="text-align: center" style="width:240px" nowrap="nowrap">'
                +'<input type="radio" name="categorie[]Tel" value="1"> Téléphone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="categorie[]Tel" value="2">   Mobile&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="categorie[]Tel" value="3"> Fax&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="categorie[]Tel" value="4"> E-mail&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
                +'</td>'
                +'<td style="text-align: center" style="width:50px">'
                +'<input type="hidden" value="0">'
                +'<a data-tooltip="Supprimer la ligne" data-placement="left"><img src="images/remove.png" class="remove_line_tel"></a>'
                +'</td>'
                +'</tr>')
        })

then I need to have the possibility to delete the rows if there are too much.

I did something like that:

$('.remove_line_tel').click(function(){
            $(this).closest("tr").remove(); 
        })

but it does not work except for the rows that exist when I load the page.

I guess it is something with the dom (ready or not ?). Where have I gone wrong?

Use event delegation:

    $(document).on('click', '.remove_line_tel', function(){
        $(this).closest("tr").remove(); 
    });

UPDATE

Check out this page for how to do it in earlier versions of jQuery: jQuery.live() API Documentation

This should work in 1.6:

    $('.remove_line_tel').live('click', function(){
        $(this).closest("tr").remove(); 
    });

Or:

    $(document).delegate('.remove_line_tel', 'click', function(){
        $(this).closest("tr").remove(); 
    });