Search for an item with a common ancestor

Question

I have this html:

<div> <div><!-- all div without ID --> <span>some text</span> <div> <span id="listener1">click here</span> <span>sometext</span></div> <div> <span class="FIND_ME">Result Here</span></div> </div> <div> <span>some text</span> <div id="div1"> <div id="div2"> <span id="listener2">click here</span> <span>sometext</span></div> </div> <div> <span class="FIND_ME">Result Here</span></div> </div> </div> 

There should be the following logic: wheen I click "click here", an element with class "FIND_ME" should hide, which is the closest common ancestor when the button is pressed. Is it possible to do this?

 $("#listener1").click(function(){ $(this).<SUPER_SEARCHING>.hide(); // for example hide, or add some CSS class }); 

Answer 1

You can find the closest div that has the .find_me element in it:

 $("#listener1").click(function(){ $(this).closest('div:has(.FIND_ME)').find('.FIND_ME').hide(); }); 

Working demo