jQuery, Using .remove() , but I would like a confirmation box to appear.

Question

I am using jQuery's .remove() to get rid of divs of content, but I would like to be able to have a confirmation or dialog box appear before it is removed. I am just not sure of the context of how I would write such a dialog.

$(".remove").click(function () {
  $('div').remove('#item1');
});

Upon clicking the link with class remove I would like a box to popup saying Are you sure you want to remove this? Then click Yes to remove and no to keep it. Thanks in Advance

Answer 1

Try this:

$(".remove").click(function () {
  if(confirm("are you sure you want to remove the div")){
    $('div').remove('#item1');
  }
});

Hope it helps

Answer 2

$(".remove").click(function () {
    if (confirm('Are you sure?')) {
        $('div').remove('#item1');
    }
});

Answer 3

$(".remove").click(function () {
  if(confirm("Are you sure you want to remove this?")) {
    $('div').remove('#item1');
  }
});

Answer 4

Try the window.confirm: https://developer.mozilla.org/en/window.confirm

$(".remove").click(function () {
  if(window.confirm('Are you sure?')) {
    $('div').remove('#item1');
  }
});

Answer 5

I think that if you are looking for a nicer confirm dialog then the default on the browser gives you.

look at jQueryUI confirm dialog You can style it as you want

this is how you implement it:

  <div id="dialog" title="Confirmation Required">
  Are you sure about this?
  </div>

<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
  autoOpen: false,
  modal: true
});
 });



$("#dialog").dialog({
  buttons : {
    "Confirm" : function() {
    // do something remove()
    },
    "Cancel" : function() {
      $(this).dialog("close");
    }
  }
});

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