How do I hide a div based on empty input fields within it?

Question

I have a form made up of multiple, optional subparts - each of which is enclosed in a

<div class="details"></div>

When editing the form I would like to hide those subparts which aren't as yet completed, and obviously I would like to do it unobtrusively. To simplify things I'm just checking to see if those fields whose name ends in 'surname' are empty, and then show/hide appropriately. So far, I have this.

//hide the all of the element class details
$(".details").each(function (i) {
  if ($('input[name$=surname]:empty',this).length == 1) { 
    $(this).hide();
  } else {
    $(this).show();
  }
});

Of course, the :empty selector may be wrong, or indeed inappropriate. (Of course what I really want to do is show any parts where any fields are completed, but I thought I'd start with just checking the most important one.)

I would be greatful if anyone could anyone point me in the right direction...

Answer 1

No selector love? Not exactly sure it's what you're really looking for but this hides all details elements with an empty input inside. Perhaps it's a clue.

<div class="details">
    <input type="text" name="surname" />
</div>

<script type="text/javascript">
    $(".details input[@value='']").parents(".details").hide();
</script>

Answer 2

Thanks guys - the [value=""] was the piece I was missing. In case anyone else wonders, the barebones jQuery that did the trick (thanks to cristian) was

    //hide the all of the element class details
    $(".details").each(function (i) {
      if ($('input[name$=surname][value=""]',this).length == 1) { 
        $(this).hide();
        console.log('hiding');
      } else {
        $(this).show();
        console.log('showing');
      }
    });