I have a page that contains a table with the following format:

```
    <table id="gigsTable">
        <tr><th>Date</th><th>Time</th><th>Location</th><th>Remove</th></tr>
        <tr class="gigRow">
            <td><input name="date" type="text" value="Date goes here"></td>
            <td><input name="time" type="text" value="Time goes here"></td>
            <td><input name="location" type="text" value="Location goes here"></td>
            <td class="remove"><input name="remove" type="checkbox" /></td>
        </tr>

```

When the checkbox in the remove column is clicked its parent row fades out and then is removed using the following jQuery:

```
    $("#gigsTable tr .remove input").click(function() {
        $(this).parent().parent().fadeOut(500, function() {
            $(this).remove();
            rowCount--;
        });
    });

```

I also have a button that adds a row to the table when clicked:

```
    $('#addGig').click(function() {
        $('#gigsTable tr:last').after('<ROW FORMAT FROM HTML>');
        rowCount++;
    });

```

This all works fine however when I try to remove a row that is inserted using the above method nothing happens. Why?