Question

I’m having a problem removing my cloned tr.. my cloning function is working perfectly but whenever im trying to add a remove button on the right side nothings happen .. please help me

jQuery :

$(".addjob").click(function(){
        var $clone = $('table.tbll tr.cloneme:first').clone();
         console.log($clone);
         $clone.append("<td><div class='rmv' >Remove</div></td>");
         $('table.tbll').append($clone);    
 });

        $(".rmv").click(function(){
            alert("wee");
           // $(this).parents('td').remove();
        });

HTML :

<table cellspacing="10" class="tbll" >
<tr>
<td>Choose Sub Heading</td><td><select name="subheading_id" style="min-width:145Px">
            <option value="1" Sub heading Me</option>
            <option value="2" Sub heading Me 2</option>     
    </select></td><td>&nbsp;</td>
</tr>
<tr classs="cloneme">
<td>Choose Job Title</td><td><select name="jobtitles_id" style="min-width:145Px"><?php
            <option value="a" >A</option>   
            <option value="b" >B</option>   
            <option value="c" >C</option>       
                    <option value="none" >None</option> 
    </select></td>
</tr>
<tr>
<td><div class="addjob" >Add another Job Title</div></td>
</tr>
</table>

Please help me. I dont know what to do

Thanks in advance..

Answer 1

All you need a event delegation: http://jsfiddle.net/h9pH5/

$(".addjob").click(function () {
   var $clone = $('table.tbll tr.cloneme:first').clone();
   console.log($clone);
   $clone.append("<td><div class='rmv' >Remove</div></td>");
   $('table.tbll').append($clone);
});

$('.tbll').on('click', '.rmv', function () {
   alert("wee");
   $(this).closest('tr').remove();
});

and in your html you have multiple s in

`<tr classs="cloneme">`
      //--^---here