jQuery - Attach a delete button to autoappend script?

Question

REVISED CODE AT THE END

I'm very new to jquery, and even though I love it, there's a lot I still need to learn... The code below will append a new row if the user clicks in the one of the existing cells in a row. That part works fine. I'm trying to figure out how to also have a [-] button at the end of each row that a user can click on to remove that row in case they make a mistake? Is that even possible?

Here's the jquery

$( function(){
        $("#knotes > tbody > tr > td > input").bind('focus', function(){
            var row = $(this).closest("tr").get(0);
            if( row.className.indexOf("clicked")==-1 )
            {       
                    var rowCopy=$(row).clone(true);
                    $(row).closest("tbody").append(rowCopy);
                    row.className+="clicked";
                    var newInput=$("input",rowCopy).get(0);
                    newInput.id="newId";
                    $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
            }
        });
});

Here's the markup

<table width="100%" cellpadding="0" cellspacing="0" id="knotes">
<thead bgcolor="#f7f9c9">
    <td align="center"><label for="name">Name</label></td>
    <td align="center" nowrap="nowrap"><label for="kot">OT </label></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><label for="kdt">DT </label></td>

    <td>&nbsp;</td>
    <td align="center"><label for="kbreak">Bk?</label></td>
    <td>&nbsp;</td>
    <td align="center"><label for="kshift">Shift</label></td>
    <td>&nbsp;</td>
</thead>

<tr>
    <td align="center" class="kac" id="test"><input type="text" id="kemployee" name="klabor[kemployee][]" /></td>

    <td align="center"><input type="text" name="klabor[kot][]"  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kdt][]"  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kbreak][]"  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kshift][]"  /></td>

</tr>
</table>

HERE IS THE REVISED CODE The revised jQuery

$( function(){
        $("#knotes > tbody > tr > td > input").bind('focus', function(){
            var row = $(this).closest("tr").get(0);
            if( row.className.indexOf("clicked")==-1 )
            {       
                    var rowCopy=$(row).clone(true);
                    $(row).closest("tbody").append(rowCopy);
                    row.className+="clicked";
                    var newInput=$("input",rowCopy).get(0);
                    newInput.id="newId";
                    $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
                    $('minus').live(function(){$(this).closest('tr').remove();});
            }
        });
});

The revised markup

<table width="100%" cellpadding="0" cellspacing="0" id="knotes">
<thead bgcolor="#f7f9c9">
    <td align="center"><label for="name">Name</label></td>
    <td align="center" nowrap="nowrap"><label for="kot">OT </label></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><label for="kdt">DT </label></td>

    <td>&nbsp;</td>
    <td align="center"><label for="kbreak">Bk?</label></td>
    <td>&nbsp;</td>
    <td align="center"><label for="kshift">Shift</label></td>
    <td>&nbsp;</td>
</thead>

<tr>
    <td align="center" class="kac" id="test"><input type="text" id="kemployee" name="klabor[kemployee][]"  /></td>

    <td align="center"><input type="text" name="klabor[kot][]" value=""  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kdt][]" value=""  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kbreak][]" value=""  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kshift][]" value="" /></td><td class="minus"><img src="/images/minus.png" /></td>

</tr>
</table>

Answer 1

yes:

$('button').live(function(){$(this).closest('tr').remove();});

where 'button' is a selector representing your [-] button.

Also, a few changes can be made to optimise your code (and make it more cross-browser compatible):

if( row.className.indexOf("clicked")==-1 )
row.className+="clicked";
newInput.id="newId";

should become:

if (row.hasClass('clicked'))
row.addClass('clicked');
newInput.attr('id','newId');

Answer 2

You can use the jQuery live method.

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

Now when ever you add or clone html code like <a class='removeMe'>(-) Remove</a> jQuery will set an onclick event for it.

Edit:

$( function(){

        $('.minus').live(function(){$(this).closest('tr').remove();});

        $("#knotes > tbody > tr > td > input").bind('focus', function(){
            var row = $(this).closest("tr").get(0);
            if( row.className.indexOf("clicked")==-1 )
            {       
                    var rowCopy=$(row).clone(true);
                    $(row).closest("tbody").append(rowCopy);
                    row.className+="clicked";
                    var newInput=$("input",rowCopy).get(0);
                    $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
            }
        });
});