Delete multiple Div's from a modal confirmation based on which div triggered the function

Question

I have several Div's that appear and would like each one to have a "delete" button on it. When a user clicks on the delete I have a modal come up with 2 choices, either confirm the delete or cancel.

THE QUESTION is: How can I adapt my code below so that only the parent div that I've selected to trigger the modal get's deleted? An array?

Here's what I've pieced together thus far:

 <div class="DivToBeDeleted">
        stuff Here <div id="deleteDiv">delete IMG</div>
    </div>

    <div class="DivToBeDeleted">
        stuff Here <div id="deleteDiv">delete IMG</div>
    </div>

//The Modal Content

<div id="dialogpop">
<div id="deleteCancel">image</div>
<div id="deleteConfirm">image</div> 
</div>    

        $(function() {
                    $.fx.speeds._default = 400;

            $("#dialogpop").dialog({
                resizable: false,
                height:260,
                modal: 'true',
                show: 'drop',
                hide: 'drop',
                autoOpen: false
                });
                $("#deleteDiv").click(function() {
                $('#dialogpop').dialog('open');
                });

                $('#deleteConfirm').click (function() {
                $('#deleteDiv').parents(".DivToBeDeleted").animate({ opacity: 'hide' }, "slow");

                        $('#dialogpop').dialog('close');    
                    });
                    $('#deleteCancel').click (function() {
                        $('#dialogpop').dialog('close');

        });
            });

Answer 1

You have to go with your buttons location in the dom, such as

<div class="dialog">
   <div>
      <button class="close">Close</button>
   </div>
</div>

$('.dialog .close').click(function() {
    var $button = $(this); // now we have a reference to the button
    $button.parents('.dialog').dialog('close'); //find the dialog div up the DOM tree and close it
});

In summary, you need to leverage the use of this to get the current item and get its parent dialog.

Answer 2

I'm not too familiar with .dialog(), but what I did here was place a temporary class on the one that was clicked called pendingDelete.

Then I just removed the one with that class, or removed the class if the delete was canceled.

*Try it out: * http://jsfiddle.net/XVGxZ/

HTML

<div class="DivToBeDeleted">
    stuff Here <div class="deleteDiv">delete IMG</div>
</div>

<div class="DivToBeDeleted">
    stuff Here <div class="deleteDiv">delete IMG</div>
</div>

//The Modal Content

<div id="dialogpop">
    <div id="deleteCancel">cancel</div>
    <div id="deleteConfirm">confirm</div> 
</div>  ​

jQuery

$.fx.speeds._default = 400;

$("#dialogpop").dialog({
    resizable: false,
    height:260,
    modal: 'true',
    show: 'drop',
    hide: 'drop',
    autoOpen: false
});

$(".deleteDiv").click(function() {
    $(this).addClass('pendingDelete');
    $('#dialogpop').dialog('open');
});

$('#deleteConfirm').click (function() {
    $('.pendingDelete').parents(".DivToBeDeleted").animate({ opacity: 'hide' }, "slow");
    $('#dialogpop').dialog('close');    
});
$('#deleteCancel').click (function() {
    $('.pendingDelete').removeClass('pendingDelete');
    $('#dialogpop').dialog('close');

});​

Answer 3

This example will remove the correct DIV from the DOM:

jQuery

<script type="text/javascript">
  $(document).ready(function(){
    $(".deleteDiv").click(function() {

      var DivToDelete=$(this).parent();

      $.fx.speeds._default = 400;

      $("#dialogpop").dialog({
        resizable: false,
        height:260,
        modal: 'true',
        buttons: { "Delete": function() { 
                     $(DivToDelete).remove();
                     $(this).dialog("close"); 
                   },
                   "Cancel": function() { $(this).dialog("close"); }}
      });
    });
  });
</script>

HTML

<div class="DivToBeDeleted">
  First! <div class="deleteDiv">First Delete Button</div>
</div>

<div class="DivToBeDeleted">
  Second! <div class="deleteDiv">Second Delete Button</div>
</div>

<div id="dialogpop"></div>