I have a HTML structure like this:

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>  

I have a HTML structure like this:

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>  

And this is expected result:

I guess I can do that by JS, something like this:

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

But I want to know can I do that by pure HTML and CSS ?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Aug 20, 2016 at 0:07 stackstack 10.2k2222 gold badges7070 silver badges130130 bronze badges 2

• Well why my question has earned one vote to be close as unclear ? Really is it unclear? I've provided a screenshot of the expected result... still it is unclear ?! – stack Commented Aug 20, 2016 at 0:11
• 1 Possible duplicate of How to hide/remove a DIV when empty – Calum Commented Aug 20, 2016 at 0:13

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

You can use the :empty pseudo selector:

 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;
}

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

If you need old browser support, you could just use line height for spacing instead.

 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> 

use :empty | CSS-Trick

 div:empty{
       display:none;
      }

reference from :empty | css-Trick

You can use Jquery like

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