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

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');

});​