How we can prevent the row hidden

Question

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> 

Answer 1

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
}

}

Answer 2

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.

Answer 3

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
        } 
    }

Answer 4

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><a href="#" class="btn btn-danger btn-xs pull-right">Delete</a></td> </tr> <tr> <td class="success">Item 2</td> <td><a href="#" class="btn btn-danger btn-xs pull-right">Delete</a></td> </tr> <tr> <td class="info">Item 3</td> <td><a href="#" class="btn btn-danger btn-xs pull-right">Delete</a></td> </tr> </table>