jQuery delete confirmation box

Question

In my jQuery am displaying my results in a table formatted output, a part of my jQuery is

<td class='close' onclick='deleteItem(#ITEMID,#ITEMNAME)'></td>

here "close" is a CSS class and in this class I have cross mark image, if I click this cross mark the function(deleteItem) will be fired.

here what I want to do is if I click this cross mark a "delete confirmation box" should pop up and if I click yes this onclick event should fire, else if I click No nothing should happen.

How can I achieve this, can anyone help me....

score 121 · Accepted Answer · answered Apr 25 '12 at 05:51

121

You need to add confirm() to your deleteItem();

function deleteItem() {
    if (confirm("Are you sure?")) {
        // your deletion code
    }
    return false;
}

answered Apr 25 '12 at 05:51

Māris Kiseļovs

16,957
5
41
48

6

This works, however it should be noted that this is not jQuery-specific and is just vanilla JavaScript. – crmpicco May 28 '13 at 11:20

score 32 · Answer 2 · edited Feb 07 '13 at 11:43

32

$(document).ready(function(){
  $(".del").click(function(){
    if (!confirm("Do you want to delete")){
      return false;
    }
  });
});

edited Feb 07 '13 at 11:43

Kobi

135,331
41
252
292

answered Feb 07 '13 at 11:12

Shashank Hegde

2,533
1
18
18

1

Best answer because it included the conditional. – johnny Jun 09 '22 at 18:12

score 16 · Answer 3 · answered Feb 15 '14 at 04:31

16

I used this:

<a href="url/to/delete.asp" onclick="return confirm(' you want to delete?');">Delete</a>

answered Feb 15 '14 at 04:31

Umair Hamid

3,509
3
23
25

score 11 · Answer 4 · answered Apr 25 '12 at 05:52

Try with below code:

$('.close').click(function(){
var checkstr =  confirm('are you sure you want to delete this?');
if(checkstr == true){
  // do your code
}else{
return false;
}
});

OR

function deleteItem(){
    var checkstr =  confirm('are you sure you want to delete this?');
    if(checkstr == true){
      // do your code
    }else{
    return false;
    }
  }

This may work for you..

Thanks.

Hüseyin BABAL · Answer 5 · 2012-04-25T05:59:17.580

function deleteItem(this) {
    if (confirm("Are you sure?")) {
          $(this).remove();
    }
    return false;
}

You can also use jquery modalin same way

JQuery version

Are you sure?

  $(document).ready(function() {
    $("#dialog-box").dialog({
      autoOpen: false,
      modal: true
    });

  $(".close").click(function(e) {
    var currentElem = $(this);
    $("#dialog-box").dialog({
      buttons : {
        "Confirm" : function() {
          currentElem.remove()
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog-box").dialog("open");
  });
});

score 4 · Answer 6 · answered Apr 25 '12 at 06:09

4

Try with this JSFiddle DEMO : http://jsfiddle.net/2yEtK/3/

Jquery Code:

$("a.removeRecord").live("click",function(event){
   event.stopPropagation();
   if(confirm("Do you want to delete?")) {
    this.click;
       alert("Ok");
   }
   else
   {
       alert("Cancel");
   }       
   event.preventDefault();

});

answered Apr 25 '12 at 06:09

Rony SP

2,618
15
16

thanks for ur valuable response with an example, I got the solution – shanish Apr 25 '12 at 06:48

score 3 · Answer 7 · answered Jan 13 '13 at 11:59

3

Simply works as:

$("a. close").live("click",function(event){
     return confirm("Do you want to delete?");
});

answered Jan 13 '13 at 11:59

readikus

369
1
6
17

Wael Assaf · Answer 8 · 2019-01-24T20:32:48.390

3

Try this my friend

  // Confirmation Message On Delete Button.

  $('.close').click(function() {
    return confirm('Are You Sure ?')
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class='close'></td>

edited Jan 24 '19 at 20:32

answered Dec 24 '16 at 01:03

Wael Assaf

1,233
14
24

score 2 · Answer 9 · answered May 13 '13 at 10:43

2

Update JQuery for version 1.9.1 link for deletion is here $("#div1").find('button').click(function(){...}

answered May 13 '13 at 10:43

Servantwriter

21
3

jQuery delete confirmation box

9 Answers9

Linked