Removing a parent without clicking on children

Question

I have layer A and layer B inside layer A

http://jsfiddle.net/PhZhY/

Is it possible to remove layer A using the jQuery remove() function by simply clicking on layer A rather than layer B?

Answer 1

 $("body").on("click", ".a1", function(e) { if (this === e.target) $(this).remove(); });​ 

DEMO: http://jsfiddle.net/PhZhY/1/

Answer 2

If you want .b1 remain and be deleted only .a1

 $('.a1').live('click',function() { $(".b1", this).unwrap(); }); 

http://jsfiddle.net/PhZhY/3/

You can remove this div even if you don't know any child:

 $('.a1').live('click',function() { $(".a1 :first-child").unwrap(); }); 

http://jsfiddle.net/PhZhY/5/

If you want to remove the .a1 div, if it did not click inside .b2 , this is what you need:

 $('.a1').live('click',function() { $(".a1 :first-child").unwrap(); }); $('.b1').live('click',function() { throw "stop execution"; });​ 

http://jsfiddle.net/PhZhY/6/

According to a comment by @Rick Calder: If you want, you can use .addClass() to change the class or .removeClass() to delete the class.

Answer 3

This is how I read the question:

If you press .b1 , nothing should happen. If you press .a1 , it should be deleted.

If this is the intention, here is jQuery:

 $('.b1').click( function(e){ e.stopImmediatePropagation(); }); $('.a1').click( function(){ $(this).remove(); }); 

Here is jsbin . Note: css, html, shamelessly stolen from @Vision jsFiddle