I am dealing with a large outer div that contains several identical circles (each being a smaller div with border-radius set to 100%).
Using jQuery, I have implemented a function to fade out these circles when a user clicks on them. However, I want to trigger an additional event when the only remaining circle is clicked.
:last-child or :nth-child() selectors won't work in this case because it doesn't matter which circle is clicked until there is only one left.
It's important to note that even though the elements are FADED OUT, they remain as siblings of the visible elements. Therefore, I need to select the "last visible" element.
<div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
$(document).ready(function(){
$(".circle").click(function(){
$(this).fadeOut("slow");
});
$("XXX").click(function(){
alert("I was the last of Mohicans");
});
});