How do I hide a div based on empty input fields within it?
<p>I have a form made up of multiple, optional subparts - each of which is enclosed in a</p>

<pre><code>&lt;div class="details"&gt;&lt;/div&gt;
</code></pre>

<p>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.</p>

<pre><code>//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();
  }
});
</code></pre>

<p>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.)</p>

<p>I would be greatful if anyone could anyone point me in the right direction...</p>
