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

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

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

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

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

$("div.details input").each(function () {
  if (this.value == "")
    $(this).parents("div.details").eq(1).hide();
  else
    $(this).parents("div.details").eq(1).show();
});

$("div.details input[name$=surname]").each(function () { /* etc... */

//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');
      }
    });