Question

I having trouble to select the currently clicked container element.

My Html

<div class="cparent">
foo1
<a href="javascript:void(0);" class="delete">Delete</a>
</div>

<div class="cparent">
foo2
<a href="javascript:void(0);" class="delete">Delete</a>
</div>

I mean when I click on delete link, corresponding container should disappear. How can I do this?

What I tried !

$(".cparent",this).html('Deleting...').delay(1000).fadeOut();// not working

My script

$(".delete").live("click",function(){
 var cur = $(".delete").index(this);
 $(".cparent").eq(cur).html('Deleting...').delay(1000).fadeOut();
 });

Above one is also not working. Have a look at this Example for clarification.

Answer 1

Use the parent^{[API Ref]} method:

$(this).parent().html('Deleting...').delay(1000).fadeOut();

Passing this as the second parameter to the jQuery function won’t find elements that are above this. Alternatively, you can use the closest^{[API Ref]} method:

$(this).closest('.cparent').html('Deleting...').delay(1000).fadeOut();