html table tr remove smooth effect

table row remover using jquery with smooth animate effect.

by inoutmail

HTML

<div class="CSSTableGenerator">
    <table >
        <tr> 
            <td>
                Title 1
            </td>
            <td >
                Title 2
            </td>
            <td>
                Title 3
            </td>
        </tr>
        <tr>
            <td >
                Row 1
            </td>
            <td>
                Row 1
            </td>
            <td>
                 <a href="Javascript:void(0)" title="Delete" class="delete">Remove</a>
            </td>
        </tr>
        <tr>
            <td >
                Row 2
            </td>
            <td>
                Row 2
            </td>
            <td>
                <a href="Javascript:void(0)" title="Delete" class="delete">Remove</a>
            </td>
        </tr>
        <tr>
            <td >
                Row 3
            </td>
            <td>
                Row 3
            </td>
            <td>
                <a href="Javascript:void(0)" title="Delete" class="delete">Remove</a>
            </td>
        </tr>
        <tr>
            <td >
                Row 4
            </td>
            <td>
                Row 4
            </td>
            <td>
                <a href="Javascript:void(0)" title="Delete" class="delete">Remove</a>
            </td>
        </tr>
    </table>
</div>
<button id="reset">Reset</button>

CSS

.CSSTableGenerator{width:70%;box-shadow:10px 10px 5px #888;border:1px solid #000;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0;border-bottom-right-radius:0;-moz-border-radius-topright:0;-webkit-border-top-right-radius:0;border-top-right-radius:0;-moz-border-radius-topleft:0;-webkit-border-top-left-radius:0;border-top-left-radius:0;margin:0;padding:0}
.CSSTableGenerator table{width:100%;height:100%;margin:0;padding:0}
.CSSTableGenerator tr:last-child td:last-child{-moz-border-radius-bottomright:0;-webkit-border-bottom-right-radius:0;border-bottom-right-radius:0;border-width:0}
.CSSTableGenerator table tr:first-child td:first-child{-moz-border-radius-topleft:0;-webkit-border-top-left-radius:0;border-top-left-radius:0}
.CSSTableGenerator table tr:first-child td:last-child{-moz-border-radius-topright:0;-webkit-border-top-right-radius:0;border-top-right-radius:0}
.CSSTableGenerator tr:last-child td:first-child{-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0}
.CSSTableGenerator tr:nth-child(odd){background-color:#ffaa56}
.CSSTableGenerator tr:nth-child(even){background-color:#fff}
.CSSTableGenerator td{vertical-align:middle;border:1px solid #000;text-align:left;font-size:10px;font-family:Arial;font-weight:700;color:#000;border-width:0 1px 1px 0;padding:7px}
.CSSTableGenerator tr:last-child td{border-width:0 1px 0 0}
.CSSTableGenerator tr:first-child td{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00",endColorstr="#bf5f00");background:0;background-color:#ff7f00;border:0 solid #000;text-align:center;font-size:14px;font-family:Arial;font-weight:700;color:#fff;border-width:0 0 1px 1px}
.CSSTableGenerator tr:first-child:hover td{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00",endColorstr="#bf5f00");background:0;background-color:#ff7f00}
.CSSTableGenerator...

JavaScript

var original = $('table').html();
$("#reset").click(function() {
    $('table').html(original);
    return false;
});

$('.delete').live('click', function() {
    $(this).closest('tr').children('td').addClass('deleteHighlight').animate({
        padding: 0
    }).wrapInner('<div />').children().slideUp(function() {
        $(this).closest('tr').remove();
    });
    return false;
});