How to hide the "dt" when following "dd"s are hidden

Question

hello everyone,

I have a triggered javascript function to hide "dd"s which have the same class name. But the problem is, sometimes, only the dt is left alone. For example, the first dt dd block, when I hidden the all 3 dd's. the dt (today) one is still there. I want to hide the dt too when no dd is associated. How can i do that?

thanks

<dl>
                                <dt>Today</dt>
                                <dd class="Admissions3">14:59 > Admission: Transfer, B3FOL, Metroplex Hospital</dd>
                                <dd class="Admissions3">12:00 > IM: Review by Me, Wound healing well. Could need further follow-up...</dd>
                                <dd class="Admissions3" style="color: Black">09:42 > LAB: WOUND CULTURE, Staph aureus (Pending)</dd>
                                <dt>Yesterday</dt>
                                <dd class="Laboratory3">16:40 > LAB: UMCS, Blood, Enterococcus sp. Light growth of (Pending)</dd>
                                <dd class="Surgery3">10:35 > SUR: Right Total Hip Replacement</dd>
                                <dt>Two days ago</dt>
                                <dd class="Admissions3">16:25 > ADT: Transfer, ICU, Metroplex Hospital</dd>
                                <dd class="Laboratory3">13:15 > LAB: UMCS, Swab, No growth</dd>
                                <dd class="Admissions3">13:10 > ADT: Admit EXC HUTCHINSONS MELANOTIC FRECKLE</dd>
                                <dt>Four days ago</dt>
                                <dd class="CentralLine3">14:24 > RM: Parking Incident</dd>
                                <dd class="CentralLine3">14:05 > RX: Doxycycline 4g Daily</dd>
                                <dd class="Admissions3">13:20 > ADT: Podiatry</dd>
                                <dt>9/7/09</dt>
                                <dd class="Laboratory3">15:32 > LAB: UMCS, Blood, No growth</dd>
                                <dd class="Pharmacy3">10:18 > IM: Isolation Precautions - High</dd>
                                <dt>3/5/09</dt>
                                <dd class="Surgery3">11:45 > SUR: Left Total Hip Replacement</dd>
                                <dd class="Admissions3">09:20 > ADM: Transfer, B3ROD, Real World Hospital</dd>
                                <dd class="Admissions3">09:17 > ADM: Total Hip Replacement, Real World Hospital</dd>
                            </dl>

Answer 1

This little segment of code might help.

var $dl = $('dl'); // hook this up to your DL

$dl.find('dt').each(function() {
  var $dt = $(this), $next = $dt.nextAll(':visible').slice(0,1);

  // if the next visible item is also a dt, or there isn't a next visible item
  if ($next.is('dt') || $next.length == 0)
  {
    $dt.hide();
  } else {
    $dt.show();
  }
});      

Answer 2

I feel like there should be a better way, but how about this?

$('.Admissions3').hide();

$('dt').each(function() {
  var $dt = $(this);

  if (!$dt.next(':visible').is('dd'))
    $dt.hide();
});

You can see it in action here: http://jsbin.com/orolo3/edit