Question

I have gone through most similar JQuery posts relating to hiding parent containers but none of the options seemed to work for me.

In a nutshell I have the following code

<div id="pagination" class="pagination">
  <span class="previous disabled">« Previous</span>
  <span class="next disabled">Next »</span>
</div>

*Not my coding btw :-p

Currently the pagination div (above) on my store is empty – this happens because the pagination has not been triggered to show the previous and next spans in the above code. You can see that they have a class name of .disabled which just sets those spans to display:none.

I would like to create a Jquery function that hides the parent div #pagination when the child span.previous and span.next are set to .disabled.

Thanks for your help in advanced!

Answer 1

You could do

$('.pagination').each(function(){
   var $this = $(this);
    if($('span.next', this).hasClass('disabled') && $('span.previous', this).hasClass('disabled')){
       $this.hide();
    }
});

fiddle here http://jsfiddle.net/hwrx2/