How to hide/remove a DIV when empty

Question

I have some server side HTML output I cannot deal with using pure CSS, essentially the DIV sometimes holds:

Content

        
                      

              相关标签:
       
      

Answer 1

You can do this using only CSS:

div:empty { display: none }

Answer 2

You can also use CSS-only to solve this, putting a table with style="empty-cells:hide" around the content, and changing the div to a td, like this:

Before:

<div>Content</div>

After:

<table style="empty-cells:hide"><tr><td>Content</td></tr></table>

Answer 3

Here's another easy way... using the filter()...

$('div').filter(function() {

  return $.trim($(this).text()) === ''

}).remove()

Answer 4

Even better (assuming jQuery):

$(document).ready(function() { $('div:empty').remove(); });

EDIT: The other answers are good, but the OP wanted to remove the empty item, not hide it.

Answer 5

I think you can do the following:

$(function() {
  $("div:empty").hide();
});

jQuery's empty pseudo selector is great.