Bootstrap table delete row JQuery CSS

Bootstrap table delete row JQuery CSS

by Hifni Nazeer

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<div class="container">
    <h2>Table Management</h2>
    <div class="table-responsive">
    <table border="1" class="table table-striped table-hover  table-bordered">
<tr>
    <td>aaa</td>    <td>aaa</td>    <td>aaa</td>    <td>aaa</td>    <td>aaa</td><td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>
    </tr><tr>
    <td>aaa</td>    <td>aaa</td>    <td>aaa</td>    <td>aaa</td>    <td>aaa</td><td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>
    </tr><tr>
    <td>aaa</td>    <td>aaa</td>    <td>aaa</td>    <td>aaa</td>    <td>aaa</td><td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>
    </tr><tr>
    <td>aaa</td>    <td>aaa</td>    <td>aaa</td>    <td>aaa</td>    <td>aaa</td><td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>
    </tr><tr>
    <td>aaa</td>    <td>aaa</td>    <td>aaa</td>    <td>aaa</td>    <td>aaa</td> <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>
    </tr>
    </table>
</div></div>

<hr>
    <button class='btn btn-lg btn-primary addnewrow pull-right'>Add New <span class="glyphicon glyphicon-plus"></span></button>

CSS

table{width:100%}

.deleterow{cursor:pointer}

JavaScript

$(".deleterow").on("click", function(){
var $killrow = $(this).parent('tr');
    $killrow.addClass("danger");
$killrow.fadeOut(2000, function(){
    $(this).remove();
});});


$(".addnewrow").on("click", function(){
$('table tr:last').after("<tr><td data-qid='X'><span>NEW</span></td><td><span>NEW</span></td><td><span>NEW</span></td><td><span>NEW</span></td><td><span>NEW</span></td><td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td></tr>");
});