jQuery creating a "delete comment" trigger

[tmrd]

Hi!

I’m trying to add “delete comment” functionality to my website, but there is a problem. When I click trigger (three dots), all of the delete buttons appear on all comments that are listed. I want it to be appear on the comment that’s clicked.

Here’s my script.

HTML

<span id="dcid<?php echo $comment['comment_id']; ?>" onclick="cdelete()" class="comment-delete">...
    <a class="edit-comment" id="<?php echo $comment['comment_id']; ?>" href="">Delete comment</a>
</span>

CSS

.comment.delete {
    display:none;
}

JS

$('.comment-delete').click(function (a) {
    a.preventDefault();
    $(this).css('display', 'block'); // this one adds display:block to span, but I want to target its child anchor.


});

[djsmithme]

you either need to use ‘find’ or ‘each’ and then have a click event attached for each:

    $(document).ready(function(){    
    
    $('.comment-delete').each(function(){
    
        $(this).on('click', function(){
        //do something
       
        });
    
        });
    
    });

[lorenw]

html
…
Delete comment

<span id="dcid<?php echo $comment['comment_id']; ?>" class="comment-delete">...
<a class="edit-comment" id="adcid<?php echo $comment['comment_id']; ?>" href="">Delete comment</a>
</span>

JQ

jQuery(document).ready(function ($) {

$('.comment-delete').click(function (a) {
a.preventDefault();
var thisId = $(this).attr('id');	
$('#a'+thisId).css('display', 'block'); // this one adds display:block to span, but I want to target its child anchor.
});

})

The trick here is to add an “a” to the beginning of the child ID.
you could also do

var thisId = $(this).next('a').attr('id');

[tmrd]

Thanks, guys!