How to hide elements which has no next elements with a certain class?

Question

i have the following html , and i want to hide all lsHeader which has no next elements with class contact using jquery.

<div id="B" class="lsHeader">B</div>
  <div id="contact_1" class="contact"> B.Contact1</b/>
  <div id="contact_2" class="contact"> B.Contact2</b/>
  <div id="contact_3" class="contact"> B.Contact3</b/>
  <div id="contact_4" class="contact"> B.Contact4</b/>
  <div id="contact_5" class="contact"> B.Contact5</b/>
<div id="C" class="lsHeader">C</div>
  <div id="contact_6" class="contact"> C.Contact6</b/>
  <div id="contact_7" class="contact"> C.Contact7</b/>
  <div id="contact_8" class="contact"> C.Contact8</b/>
  <div id="contact_9" class="contact"> C.Contact9</b/>
  <div id="contact_10" class="contact"> C.Contact10</b/>
<div id="D" class="lsHeader">D</div>
<div id="F" class="lsHeader">F</div>

Note

lsHeader has no children, i want to check based on next elements.

Answer 1

What about this:

$(".lsHeader").each(function() {
    if (!$(this).next().is("div.contact")) {
        $(this).hide();
    }
});

Depending on your specific needs, you may want to replace next with nextAll.

Answer 2

Are you generating the (X)HTML? If so then:

<style>.IsHeader.empty {display: none;}</style>
<div id="D" class="lsHeader empty">D</div>