如何在元素值爲空時移除元素的高度？

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

如果需要舊的瀏覽器的支持，你可以只使用線高度，間距來代替。

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 2

您可以使用：空僞選擇：

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>

Answer 3

您可以使用jQuery像

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

Answer 4

使用：空| CSS帽子戲法

div:empty{ 
     display:none; 
     } 

reference from :empty | css-Trick