Question

I’ll just get right to the point. I’ve got a table like this:

<table>
    <tr id="template">
        <td>Some text</td>
        <td><a class="add">Add</a></td>
    </tr>
</table>

Then I’ve got some JavaScript, like this:

$(document).ready(function() {
    $('a.add').click(function(event) {
        var newRow = $('#template').clone();
        newRow.removeAttr('id');
        newRow.find('td.button a').removeClass('add').addClass('remove').text('Remove');
        newRow.unbind(event).click(function()) {
            alert('Put some remove row code here');
        });
        $('#template').before(newRow);
    });
});

What this all does is to show a table with a single row, whose last column contains a link. If you click the link, a copy is made of the row and inserted before the row. In that process, the class of the link element is switched from “add” to “remove”, and the text of the link is switched to “Remove”.

Now, the point of this is that you’re supposed to be able to add new rows by clicking on the “Add” link of the bottom row, and remove new rows by clicking on their “Remove” links.

Unfortunatly, the “Remove” links still acts like the “Add” link, adding new rows. The unbind was supposed to take care of that, but for some reason it doesn’t. The alert is still displayed, though.

Answer 1

unbind should be on the a tag rather than the newRow.

$(document).ready(function() {
    $('a.add').click(function(event) {
        var newRow = $('#template').clone();
        newRow.removeAttr('id');
        newRow.find('td a').removeClass('add').addClass('remove').text('Remove')
            .unbind(event).click(function() {
                alert('Put some remove row code here');
            })
        $('#template').before(newRow);
    });
});