如何在不顯示內容時隱藏div

我是HTML和CSS的新手。現在，我有下面的代碼頁：
通過內容顯示：如何在不顯示內容時隱藏div

<div id="row-3" ><!-- Row 3 start here --> 

    <div class="groupz_column1" style="margin-right:0px;"><a href="http://www.xyz.in/ads/test.jpg" title=""><h2>null</h2><img align="left" width="100px" height="70px" src="http://www.xyz.in/ads/test.jpg?id=225"><p>Sign off for limited time offer<p></a></div> 
    <div class="groupz_column1" style="margin-right:0px;"><a href="http://www.xyz.in/ads/test.jpg" title=""><h2>Test</h2><img align="left" width="100px" height="70px" src="http://www.xyz.in/ads/test.jpg?id=194"><p>A wonderful opportunity <p></a></div> 
    <div class="groupz_column1" ></div> 
    <div class="groupz_column1" ></div> 
    <div class="clear clearfix"></div> 
</div>

上面的代碼顯示了兩個內容。
沒有內容顯示：

<div id="row-3" ><!-- Row 3 start here --> 
    <div class="groupz_column1" ></div> 
    <div class="groupz_column1" ></div> 
    <div class="groupz_column1" ></div> 
    <div class="groupz_column1" ></div> 
    <div class="clear clearfix"></div> 
</div>

現在，我的問題是，我想隱藏，如果內容不存在。即使沒有一個內容，我也不想顯示<div id="row-3">。我怎樣才能做到這一點？

編輯我這樣做，仍然沒有工作

<div id="row-3" style="div:empty { display: none }">

來源

2013-11-29 user3004356

你試過'display ='none''？ – MusicLovingIndianGirl

如果沒有內容，它不會在您的網頁上顯示任何內容....您爲什麼要將它隱藏在第一個位置？ – NoobEditor

你是否動態追加div中的元素？ –

添加此javascript

$(document).ready(function() { 
    var doHide = true; 
    $("#row-3 div").each(function() { 
     if ($(this).html() != '') { 
      doHide = false; 
     } 
    }); 

    if (doHide) { 
     $("#row-3").hide(); 
    } 
});

來源

2013-11-29 07:20:46 zzlalani

是的，它的coollll –

-1

考慮到評論，添加white-space: nowrap;到你的CSS groupz_column1類.....它會刪除其出現在白色的空間空div

此外，檢查此鏈接，它也有類似的問題，因爲你的：Remove "whitespace" between div element

來源

2013-11-29 07:12:44 NoobEditor

不......它不起作用 – user3004356

檢查參考鏈接中提到的'！doc type' ...可能有幫助！ – NoobEditor

給那個downvoted的人，你介意分享它的原因!! ???? :) – NoobEditor

做CSS：

#row-3{ 
     display: none; 
    }

來源

2013-11-29 07:12:55

試試這個：

$('div[id^=row-]').each(function() { 
    var content = false; 
    $(this).find('div').each(function() { 
     if (this.innerHTML != '') { 
      content = true 
     }; 
    }); 
    if (!content) { 
     this.style.display = 'none'; 
    } 
});

來源

2013-11-29 07:23:42 Sergio

您需要檢查的內容長度是否大於零顯示它在其他刪除或隱藏它在你的條件下

var getLength = $("#row_new .groupz_column1").html().trim().length; 

    if (getLength == 0) { 
     // $("#row_new").remove(); // for remove 
     $("#row_new").hide(); // for hide 
    }

LIVE DEMO

來源

2013-11-29 07:26:15

如何在不顯示內容時隱藏div

回答

相關問題