JSFiddle - React, Tailwind, and code Playground

by Jacob Stamm

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table class="table table-bordered">
    <tr>
        <td>1</td>
        <td>ASP .NET MVC</td>
        <td><input type="button" value="Delete" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Angular.js</td>
        <td><input type="button" value="Delete" /></td>
    </tr>
    <tr>
        <td>3</td>
        <td>SignalR</td>
        <td><input type="button" value="Delete" /></td>
    </tr>    
</table>

CSS

input[type='button'] {
    color: black;
}

JavaScript

$(document).ready(function () {
	$("td input[type='button']").on("click", function() {
    	DeleteRow(this); 
    });
});

function DeleteRow(cellButton) {
    var row = $(cellButton).closest('tr')
        .children('td')
    	.css({ backgroundColor: "red", color: "white" });
    setTimeout(function () {
            $(row)
            .animate({ paddingTop: 0, paddingBottom: 0 }, 500)
            .wrapInner('<div />')
            .children()
            .slideUp(500, function() { $(this).closest('tr').remove(); });
    	}, 350
    );
};