How to dismiss the parent div when we click div's anchor tag?

Question

I have some divs of same class name "parent". And with in, there are two child divs with class names, "child1" and "child2". The "child1" div has a p-tag and "child2" has an a-tag.

My question is, can the parent div be dismissed when I click on the child2's a-tag with out closing the other parent divs ??

<div class="parent">
     <div class="child1">
         <p>Paragraph</p>
     </div>
     <div class="child2">
         <a href="#">anchor</a>
     </div>
</div>

Kindly check THIS for understanding what I need.

Thanks a lot, Guys !

Answer 1

This should do it.

$('.child2').click(function() {
    $(this).parent().fadeOut(); 
});

http://jsfiddle.net/nischaalc/LCB5W/29/

Answer 2

using jquery

  $('.child2 a').click(function() {
    $(".parent").hide();
    $(this).closest(".parent").show();
    return false;
});

I update code just now!

Answer 3

Following is working for me

$('.child2 > a').each(function() {

    $(this).bind(
        "click",
        function() {

            $(this).closest( ".parent" ).fadeOut();
            //or  $(this).closest( ".parent" ).hide();
        });
  });

Check this also on jsfiddler : http://jsfiddle.net/LCB5W/31/

Answer 4

You can dismiss the parent with a slid-up effect, like below.

$('.child2').click(function(e){
    //$(this).parents('.parent').remove();

     $(this).parents('.parent').slideUp('slow',function(){
        $(this).remove();
    });
})

demo : http://jsfiddle.net/LCB5W/33/