I am getting one issue while trying to hide button after a button click using Angular.js.I am explaining my code below.
<tbody id="detailsstockid">
<tr ng-repeat="code in ListOfGeneratedCode">
<td>{{$index+1}}</td>
<td>{{code.name}}</td>
<td>{{code.no_of_voucher}}</td>
<td>{{code.expired_date}}</td>
<td>{{code.voucher_amount}}</td>
<td>
<input type='button' class='btn btn-xs btn-green' value='View' ng-click="viewVoucherCodeData(code.voucher_code_id);">
</td>
<td><img ng-src="upload/{{code.image}}" name="pro" border="0" style="width:50px; height:50px; border:#808080 1px solid;" /></td>
<td>
<input type='button' class='btn btn-xs btn-green' value='Send' ng-click="sendVoucherCode(code.voucher_code_id);">
</td>
<td ng-hide="editButton">
<a ui-sref="code">
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editVoucherCodeData(code.voucher_code_id);">
</a>
</td>
<td ng-hide="delButton">
<a ui-sref="code">
<input type='button' class='btn btn-xs btn-red' value='Remove' ng-click="deleteVoucherCodeData(code.voucher_code_id);">
</a>
</td>
</tr>
</tbody>
My controller side code is given below.
$scope.sendVoucherCode=function(voucherCodeId){
$scope.editButton=true;
$scope.delButton=true;
}
Here my problem is when user is clicking on Send all row's edit and delete button has disappearing.I need when user will click on send button the respective row's edit and delete button should disappear.Please help me.
The existing code needs some modification as the key for edit and delete is same, so it clears the whole. Please refer the code below:
HTML
<tbody id="detailsstockid">
<tr ng-repeat="code in ListOfGeneratedCode">
<td>{{$index+1}}</td>
<td>{{code.name}}</td>
<td>{{code.no_of_voucher}}</td>
<td>{{code.expired_date}}</td>
<td>{{code.voucher_amount}}</td>
<td><input type='button' class='btn btn-xs btn-green' value='View' ng-click="viewVoucherCodeData(code.voucher_code_id);"></td>
<td><img ng-src="upload/{{code.image}}" name="pro" border="0" style="width:50px; height:50px; border:#808080 1px solid;" /></td>
<td>
<input type='button' class='btn btn-xs btn-green' value='Send' ng-click="sendVoucherCode(code.voucher_code_id);">
</td>
<td ng-hide="code.editButton">
<a ui-sref="code">
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editVoucherCodeData(code.voucher_code_id);">
</a>
</td>
<td ng-hide="code.delButton">
<a ui-sref="code">
<input type='button' class='btn btn-xs btn-red' value='Remove' ng-click="deleteVoucherCodeData(code.voucher_code_id);">
</a>
</td>
</tr>
</tbody>
JS
Add this after $scope.ListOfGeneratedCode has been instantiated.
angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
value.push('editButton', false);
value.push('delButton', false);
});
Append/change the existing methods with:
$scope.sendVoucherCode = function (id) {
angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
if (value.voucher_code_id == id) {
value.editButton = $scope.delButton = true;
}
});
}
$scope.editVoucherCodeData = function (id) {
angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
if (value.voucher_code_id == id) {
value.editButton = true;
}
});
}
$scope.deleteVoucherCodeData = function (id) {
angular.forEach($scope.ListOfGeneratedCode, function (value, key) {
if (value.voucher_code_id == id) {
value.delButton = true;
}
});
}
Related
Hi I'm trying to build a table with inputs for a budget tracking app. I'm having some trouble with the JS. Essentially I want the user to be able to add, edit and save rows.
I want only the save or edit button to be visible at one time. This works after editing and saving a row, but by default it shows all buttons. Also after editing a row the buttons are no longer in line but rather stacked on top of each other.
Any help would be really appreciated. This is my first time using JS.
My Code
<div>
<!-- ... -->
<div class="five">
<h1>Transactions</h1>
<div class="txlist">
<table cellspacing="0" cellpadding="0" border="0" width="1500">
<thead>
<th>Date</th>
<th>Account</th>
<th>Category</th>
<th>Amount</th>
<th></th>
</thead>
<tbody class="txlist" id="data_table">
<tr id="addtx">
<td><input type="date" id="new_date" placeholder="Date"></td>
<td><input type="text" id="new_account" placeholder="Account"></td>
<td><input type="text" id="new_category" placeholder="Category"></td>
<td><input type="text" id="new_amount" placeholder="Amount"></td>
<td>
<input type="button" id="save_button3" value="Save" class="save" onclick="add_row();">
<input type="button" value="🗙" class="delete" onclick="nonew()">
</td>
</tr>
<tr id="row1">
<td id="date_row1">24.08.2020</td>
<td id="account_row1">Credit Card</td>
<td id="category_row1">Expense: Restaurants</td>
<td id="amount_row1">- $32.45</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edt" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="🗙" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="date_row2">24.08.2020</td>
<td id="account_row2">Cash</td>
<td id="category_row2">Transfer: Credit Card</td>
<td id="amount_row2">+ $250.00</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edt" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="🗙" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="date_row3">24.08.2020</td>
<td id="account_row3">Credit Card</td>
<td id="category_row3">Transfer: Cash</td>
<td id="amount_row3">- $250.00</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edt" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="🗙" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr id="row4">
<td id="date_row4">24.08.2020</td>
<td id="account_row4">Credit Card</td>
<td id="category_row4">Expense: Clothing</td>
<td id="amount_row4">- $84.95</td>
<td>
<input type="button" id="edit_button4" value="Edit" class="edt" onclick="edit_row('4')">
<input type="button" id="save_button4" value="Save" class="save" onclick="save_row('4')">
<input type="button" value="🗙" class="delete" onclick="delete_row('4')">
</td>
</tr>
<tr id="row5">
<td id="date_row5">23.08.2020</td>
<td id="account_row5">Cash</td>
<td id="category_row5">Expense: Groceries</td>
<td id="amount_row5">- $25.23</td>
<td>
<input type="button" id="edit_button5" value="Edit" class="edt" onclick="edit_row('5')">
<input type="button" id="save_button5" value="Save" class="save" onclick="save_row('5')">
<input type="button" value="🗙" class="delete" onclick="delete_row('5')">
</td>
</tr>
<tr id="row6">
<td id="date_row6">23.08.2020</td>
<td id="account_row6">Credit Card</td>
<td id="category_row6">Income: Salary</td>
<td id="amount_row6">+ $2500.00</td>
<td>
<input type="button" id="edit_button6" value="Edit" class="edt" onclick="edit_row('6')">
<input type="button" id="save_button6" value="Save" class="save" onclick="save_row('6')">
<input type="button" value="🗙" class="delete" onclick="delete_row('6')">
</td>
</tr>
<tr id="row7">
<td id="date_row7">23.08.2020</td>
<td id="account_row7">Checking Account</td>
<td id="category_row7">Transfer: Savings Account</td>
<td id="amount_row7">- $500.00</td>
<td>
<input type="button" id="edit_button7" value="Edit" class="edt" onclick="edit_row('7')">
<input type="button" id="save_button7" value="Save" class="save" onclick="save_row('7')">
<input type="button" value="🗙" class="delete" onclick="delete_row('7')">
</td>
</tr>
<tr id="row8">
<td id="date_row8">22.08.2020</td>
<td id="account_row8">Savings Account</td>
<td id="category_row8">Transfer: Checking Account</td>
<td id="amount_row8">+ $500.00</td>
<td>
<input type="button" id="edit_button8" value="Edit" class="edt" onclick="edit_row('8')">
<input type="button" id="save_button8" value="Save" class="save" onclick="save_row('8')">
<input type="button" value="🗙" class="delete" onclick="delete_row('8')">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var date=document.getElementById("date_row"+no);
var account=document.getElementById("account_row"+no);
var category=document.getElementById("category_row"+no);
var amount=document.getElementById("amount_row"+no);
var date_data=date.innerHTML;
var account_data=account.innerHTML;
var category_data=category.innerHTML;
var amount_data=amount.innerHTML;
date.innerHTML="<input type='date' id='date_date"+no+"' value='"+date_data+"'>"; //Should input type here be date?
account.innerHTML="<input type='text' id='account_text"+no+"' value='"+account_data+"'>";
category.innerHTML="<input type='text' id='category_text"+no+"' value='"+category_data+"'>";
amount.innerHTML="<input type='text' id='amount_text"+no+"' value='"+amount_data+"'>";
}
function save_row(no)
{
var date_val=document.getElementById("date_date"+no).value;
var account_val=document.getElementById("account_text"+no).value;
var category_val=document.getElementById("category_text"+no).value;
var amount_val=document.getElementById("amount_text"+no).value;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("account_row"+no).innerHTML=account_val;
document.getElementById("category_row"+no).innerHTML=category_val;
document.getElementById("amount_row"+no).innerHTML=amount_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_date=document.getElementById("new_date").value;
var new_account=document.getElementById("new_account").value;
var new_category=document.getElementById("new_category").value;
var new_amount=document.getElementById("new_amount").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='date_row"+table_len+"'>"+new_date+"</td><td id='account_row"+table_len+"'>"+new_account+"</td><td id='category_row"+table_len+"'>"+new_category+"</td><td id='amount_row"+table_len+"'>"+new_amount+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='🗙' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_date").value="";
document.getElementById("new_account").value="";
document.getElementById("new_category").value="";
document.getElementById("new_amount").value="";
}
I think there are better ways to achieve this, but all the same, your issue is that when saving and editing you are changing the button's style.display attribute to
document.getElementById("edit_button"+no).style.display="block";
you need to retain
document.getElementById("edit_button"+no).style.display="inline-block";
The markup you shared is broken. I see 2 opening <table> tags and 3 closing </table> tags.
Can you share a correct markup or minimal working code?
Hi i have an ajax jquery function which displays table data as shown in the picture, i want to add a field which says edit and delete which gives the user the permission to edit or delete table data and it will get reflected in the database. Please note i have not given any index value to the response data nor an id
is there any way to achieve this! if so could you please explain or show me references! thanx!
$("#table").append("<tr class='tr'> <td> <input type='checkbox', value='" + response.data[i].electrician_email + "'>"+response.data[i].electrician_name+" </td> <td> "+response.data[i].electrician_contact+" </td> <td> "+response.data[i].electrician_license+" </td> <td> "+response.data[i].electrician_email+" </td> <td> "+response.data[i].state+" </td> <td> "+response.data[i].city);
You can do it in a simple manner, like add a number to the row and edit the row using the rownumber. Here is the code what I have tried and hope it helps you.
like see the code snippet here
<tr id="row1">
<td id="name_row1">XXX</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
There in the tr id is row1, when you add a new row a new tr is created with id rowX X is a number. If you want to edit the row, select the row using rowX and edit or delete whatever you want.
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var name=document.getElementById("name_row"+no);
var country=document.getElementById("country_row"+no);
var age=document.getElementById("age_row"+no);
var name_data=name.innerHTML;
var country_data=country.innerHTML;
var age_data=age.innerHTML;
name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
country.innerHTML="<input type='text' id='country_text"+no+"' value='"+country_data+"'>";
age.innerHTML="<input type='text' id='age_text"+no+"' value='"+age_data+"'>";
}
function save_row(no)
{
var name_val=document.getElementById("name_text"+no).value;
var country_val=document.getElementById("country_text"+no).value;
var age_val=document.getElementById("age_text"+no).value;
document.getElementById("name_row"+no).innerHTML=name_val;
document.getElementById("country_row"+no).innerHTML=country_val;
document.getElementById("age_row"+no).innerHTML=age_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_name=document.getElementById("new_name").value;
var new_country=document.getElementById("new_country").value;
var new_age=document.getElementById("new_age").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='country_row"+table_len+"'>"+new_country+"</td><td id='age_row"+table_len+"'>"+new_age+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_name").value="";
document.getElementById("new_country").value="";
document.getElementById("new_age").value="";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr id="row1">
<td id="name_row1">XXX</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="name_row2">YYY</td>
<td id="country_row2">Australia</td>
<td id="age_row2">78</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<td><input type="text" id="new_age"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
It is complicated and that can't be answered in a few lines of code.
You may restart from scratch by looking at this old CRUD: http://jtable.org/
Or angular x-editable (using bootstrap):
https://vitalets.github.io/angular-xeditable/#editable-row
I've tried several ways to get the row index of a clicked button inside a table.
The table:
while ($info = mysqli_fetch_array($sql)) {
echo "<tr>";
echo "<th>{$info['name']}</th>";
echo "<th>{$info['pass']}</th>";
echo "<th><a href='http://{$info['link']}'>{$info['link']}</a></th>";
echo "<th><div class='delbuttons'><button class='btn btn-info' data-toggle='modal' data-target='#myModal' id='{$info['id']}'>Delete</button></div></th>";
echo "</tr>";
}
?>
These are the ways that I've tried:
$(document).on('click', '.delbuttons button', function(event) {
alert($(this).index());
}
but it always returns -1.
$(document).on('click','.delbuttons button', function(event) {
alert(this.rowIndex);
}
This returns undefined.
Your issue is in this line:
alert($(this).index());
According to the documentation:
.index(): Search for a given element from among the matched elements.
Because your button is the unique element contained in the div the correspondig result will be always 0.
In order to get the row index, instead, it is sufficient to get the index of the closest tr:
$(this).closest('tr').index()
In your second approach you try to get the rowIndex of the clicked button. But this attribute is related only to a table row element. Hence, in this case you will get undefined.
$(document).on('click','.delbuttons button', function(event) {
console.log($(this).closest('tr').index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>name1</td>
<td>pass1</td>
<td>xxx</td>
<td>
<div class="delbuttons">
<button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="id1"> Delete</button>
</div>
</td>
</tr>
<tr>
<td>name2</td>
<td>pass2</td>
<td>xxx</td>
<td>
<div class="delbuttons">
<button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="id2"> Delete</button>
</div>
</td>
</tr>
<tr>
<td>name3</td>
<td>pass3</td>
<td>xxx</td>
<td>
<div class="delbuttons">
<button class="btn btn-info" data-toggle="modal" data-target="#myModal" id="id3"> Delete</button>
</div>
</td>
</tr>
</table>
You could do:
$(document).on('click','.delbuttons button', function() {
console.log($(this).closest('tr').get(0).rowIndex);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th><div class='delbuttons'><button class='btn btn-info' data-toggle='modal' data-target='#myModal'> Delete </button> </div> </th> </tr>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th><div class='delbuttons'><button class='btn btn-info' data-toggle='modal' data-target='#myModal'> Delete </button> </div> </th> </tr>
</table>
try at this way:
$(document).on('click','.delbuttons button', function() {
console.log($(this).closest("tr").index(););
});
or try to
$(document).on('click','.delbuttons button', function() {
console.log($(this).parent().index(););
});
I am trying to insert a dynamic row in a table. Apparently, I was able to add input rows but I am unable to add a new row for button <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>. It gives an error of Uncaught SyntaxError: missing ) after argument list
<table id="tab_logic" class="table table-bordered table-striped display nowrap" cellspacing="3" width="100%">
<br>
<thead>
tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>1
</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>
</tr>
<tr id='addr1'></tr>
</tbody>
<tfoot>
</tfoot>
</table>
Javascript
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td> <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
});
</script>
use this , you put " instead of '... and in html check row <tr> but showing tr>
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td> <td class='text-center'><a class='btn btn-info btn-xs' ><span class='glyphicon glyphicon-edit'></span> Select</a> </td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
Try to keep your " and ' clean. You have a lot of them mixed up
var i = 1;
$('#add_row').click(
function(){
$('#addr'+i).html('<td>' + (i+1) + '</td><td class="text-center"><a class="btn btn-info btn-xs" href="#"><span class="glyphicon glyphicon-edit"></span>Select</a></td>');
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab_logic" class="table table-bordered table-striped display nowrap" cellspacing="3" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>1
</td>
<td class="text-center"><a class="btn btn-info btn-xs" href="#"><span class="glyphicon glyphicon-edit"></span> Select</a> </td>
</tr>
<tr id="addr1"></tr>
</tbody>
<tfoot>
</tfoot>
</table>
<button id="add_row">Add Row</button>
I have a table with several row and each row contain a delete button.
Now if we click on delete button , corresponding row is deleted/hidden from the table.
I want to implement alert "Do you want to delete ?"
if the answer is yes. Then only hidden the row ..
How we can achieve it..
<table>
<tr class="alert alert-dismissable" >
<td>
Item 1
</td>
<td>
<button data-dismiss="alert" aria-hidden="true" class="btn btn-block btn-danger btn-xs" type="button" >Delete</button>
</td>
</tr>
</table>
By using javascript (add an attribute in the HTML -> onclick="ConfirmDelete()" and define it in the JS), one can do like the following:
HTML:
<button data-dismiss="alert" onclick="ConfirmDelete()" aria-hidden="true" class="btn btn-block btn-danger btn-xs" type="button" >Delete</button>
JS:
function ConfirmDelete() {
var result = confirm("Are you sure to delete?");
if (result) {
//User confirms to delete it
} else {
//User doesn't confirms to delete it
}
}
By Jquery you can do this-
Your Html-
<table>
<tr class="alert alert-dismissable" >
<td>
Item 1
</td>
<td>
<button data-dismiss="alert" aria-hidden="true" class="btn btn-block btn-danger btn-xs" type="button" onclick="ConfirmDelete(this)">Delete</button>
</td>
</tr>
</table>
In JS
function ConfirmDelete(control) {
var Confirm = confirm("Want to delete?");
if (Confirm) {
$(control).parent().parent().css("display","none")
} else {
//User doesn't confirms to delete it
}
}
try with this below code it may help you
$(function(){
$('table').on('click','tr a',function(e){
e.preventDefault();
var result = confirm("Are you sure to delete?");
if (result) {
$(this).parents('tr').remove();} else { alert('You Canceled');}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
<tr>
<td class="active">Item 1</td>
<td>Delete</td>
</tr>
<tr>
<td class="success">Item 2</td>
<td>Delete</td>
</tr>
<tr>
<td class="info">Item 3</td>
<td>Delete</td>
</tr>
</table>
you have to use javascript for DOM manipulation.
check the code here
don't use data-dismiss api for hiding rows. It hides row instantly and don't bother about the conditions and logic in click event listener.