Question

I have a feed with comments and want to allow users to delete a comment. The code below allows users to click on an image and a dialog box appears that alerts users of the deletion.

Right now, this applies to every comment on the page, so that clicking the delete button once opens up multiple dialogs (as many dialogs as there are comments).

How can I alter the code below so that when the selector is clicked, only the dialog box for that comment appears?

$('span.delete_comment_button img').click(function() { 
        $('.delete_comment_dialog').dialog('open'); 
        return false; 
});

Answer 1

First of all, you should not have multiple #delete_comment_dialog elements on the page so we’ll change that to .delete_comment_dialog. Then you can add a class to the comment as a whole, use closest to go up to the top level comment wrapper, and find to come back down to the dialog. The HTML would look something like this:

<div class="comment">
    blah blah blah blah
    <span class="delete_comment_button">delete</span>
    <div class="delete_comment_dialog">first dialog</div>
</div>
<div class="comment">
    blah blah blah blah
    <span class="delete_comment_button">delete</span>
    <div class="delete_comment_dialog">second dialog</div>
</div>​

And your jQuery like this:

$('span.delete_comment_button').click(function() {
    $(this).closest('.comment')
           .find('.delete_comment_dialog')
           .dialog('open');
    return false; 
});​

Demo: http://jsfiddle.net/ambiguous/VePZp/

Alternatively, use a single dialog with an id attribute, add ids to your comment <div>s, and pass the id of the comment to delete through a data attribute or similar. For example:

<div id="cmt1" class="comment">
    blah blah blah blah
    <span class="delete_comment_button">delete</span>
</div>
<div id="cmt2" class="comment">
    blah blah blah blah
    <span class="delete_comment_button">delete</span>
</div>
<div id="delete_comment_dialog">the only dialog</div>

And:

$('#delete_comment_dialog').dialog({
    autoOpen: false,
    close: function() {
        // 'close' handler just for demonstration purposes.
        alert($('#delete_comment_dialog').data('kill-this'));
    }
});
$('span.delete_comment_button').click(function() {
    var $cmt = $(this).closest('.comment');
    $('#delete_comment_dialog').data('kill-this', $cmt[0].id);
    $('#delete_comment_dialog').dialog('open');
    return false; 
});​

Demo: http://jsfiddle.net/ambiguous/M4QM6/​