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

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");
 });