Как скрыть / удалить DIV, когда он пуст

Question

У меня есть некоторый вывод HTML на стороне сервера, с которым я не могу справиться, используя чистый CSS, по сути, DIV иногда содержит:

<div><span>Content</span></div>

или

<div><p>Content</p></div>

или

<div>Content</div>

или

<div> </div>

Когда DIV == <div> </div> Я хочу удалить его.

Есть идеи?

Answer 1

Вы можете сделать это, используя только CSS:

div:empty { display: none }

Answer 2

Еще лучше (при условии jQuery):

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

РЕДАКТИРОВАТЬ: Другие ответы хороши, но ОП хотел удалить пустой элемент, а не скрыть его.

Answer 3

Я думаю, что вы можете сделать следующее:

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

jQuery's empty отличный псевдо-селектор.

Answer 4

Вот еще один простой способ ... используя фильтр () ...

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

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

}).remove()

Answer 5

Вы также можете использовать только CSS для решения этой проблемы, поместив таблицу с style="empty-cells:hide" вокруг содержимого и изменив div на td, например:

До:

<div>Content</div>

После:

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