如何在值为空时删除元素的高度？

Question

我有这样的HTML结构：

li{
    list-style: none;
    border-bottom: 1px solid;
    padding:4px;
}

div{
    background-color: #eee;
    padding: 6px 0;
}

<ul>
  <li>
    <span>something</span>
    <div></div>
  </li>
  <li>
    <span>something</span>
    <div>something else</div>
  </li>
</ul>  

这是预期的结果：

我想我可以通过JS做到这一点，就像这样：

if ( $('div').val() == '' ) {
    $('div').hide();
}

但我想知道纯HTML和CSS可以做到吗？

Answer 1

您可以使用：empty伪选择器：

      $http.get('/getUsers').success(function (response) {

          if (response.responseErrorCode == 503) {
              console.log("No users in database");
          }
          else {

              $scope.users = response;
          }

      });

 div:empty {
    display: none;
 }

li{
    list-style: none;
    border-bottom: 1px solid;
    padding:4px;
}

div{
    background-color: #eee;
    padding: 6px 0;
}

div:empty {
    display: none;
}

Answer 2

如果您需要旧的浏览器支持，则可以使用行高代替间距。

 li{
      list-style: none;
      border-bottom: 1px solid;
      padding:4px;
    }
    
    div{
      background-color: #eee;
      // padding: 6px 0;
      line-height: 2;
    }

<ul>
  <li>
    <span>something</span>
    <div></div>
  </li>
  <li>
    <span>something</span>
    <div>something else</div>
  </li>
</ul> 

Answer 3

你可以使用像

这样的Jquery

$('div:empty').hide();

Answer 4

使用：空| CSS-招

 div:empty{
       display:none;
      }

reference from :empty | css-Trick