CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Eldhose Elias
Eldhose Elias

Reputation: 449

How we can prevent the row hidden

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>

Upvotes: 0

Views: 55

Answers (4)

Pavan Teja
Pavan Teja

Reputation: 3202

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.

Upvotes: 0

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

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>

Upvotes: 0

LoopCoder
LoopCoder

Reputation: 182

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

Upvotes: 0

Shashank
Shashank

Reputation: 2060

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
}

}

Upvotes: 2

Related Questions