hide heading if no div below

Question

I have some layers like so

<div class="evenprop">some prop</div>
<div class="evenprop">some prop2</div>
<div class="evenprop">some prop3</div>

<h3 class="otherprop">Other Props</h3>

<div class="evenprop">some prop4</div>
<div class="evenprop">some prop5</div>

This is fine but I need to hide the "otherprop" class if the data looks like this

<div class="evenprop">some prop</div>
<div class="evenprop">some prop2</div>
<div class="evenprop">some prop3</div>
<div class="evenprop">some prop4</div>
<div class="evenprop">some prop5</div>

<h3 class="otherprop">Other Props</h3>

The layers are dynamically put in so not sure how to do this I somehow need to say if there is no data below the class"otherprop" then hide "otherprop" if that makes sense

The desired result if no data below is

<div class="evenprop">some prop</div>
<div class="evenprop">some prop2</div>
<div class="evenprop">some prop3</div>
<div class="evenprop">some prop4</div>
<div class="evenprop">some prop5</div>

but if there is data below

<div class="evenprop">some prop</div>
<div class="evenprop">some prop2</div>
<div class="evenprop">some prop4</div>
<div class="evenprop">some prop5</div>

<h3 class="otherprop">Other Props</h3>

<div class="evenprop">some prop3</div>

Many thanks

Jamie

Answer 1

try something like this

var nxtSib = document.getElementsByClassName('otherprop')[0].NextSibling;
if(nxtSib != 'evenprop')
    nxtSib.style.display = 'none';

Answer 2

Try this in your CSS:

.otherprop:last-child {
  display: none;
}

Answer 3

Whenever you dynamically change the data there, you could check if any such things are there, like so...

var op = $('.otherprop');
if(op.nextAll('div').length) {
    op.show();
else {
    op.hide();
}

Instead of using op.show() and op.hide(), I'd also recommend using op.addClass('available') and op.removeClass('available') with the following accompanying css

.otherprop {
    display: none;
}
.otherprop.available {
    display: block;
}

Untested, but should work.

Answer 4

Thanks for the answers but this is how I got my desired result in the end

if ($('.property > .evenprop').is(':visible')){
            $('.otherprop').show();
        } else {
            $('.otherprop').hide();
        }