Showing a div element dependent on if it has content

Question

Hello,

With jQuery I am trying to determine whether or not <div> has content in it or, if it does then I want do nothing, but if doesn't then I want to add display:none to it or .hide(). Below is what I have come up with,

if ($('#left-content:contains("")').length <= 0) { $("#left-content").css({'display':'none'}); }

This does not work at all, if the div has not content then it just shows up anyway, can any offer any advice?

Answer 1

Just use the :empty filter in your selectors.

$('#left-content:empty').hide();

Answer 2

if( $( "#left-content" ).html().length == 0 ) {
    $( "#left-content" ).hide();
}

Answer 3

try to remove first whitespaces:

  // first remove whitespaces

  // html objects content version:
  var content = $.trim($("#left-content).html()).length;

  if(content == 0) {
     $("#left-content).hide();
  }

  // html RAW content version:
  var content = $.trim($("#left-content).html()); // <-- same but without length

  if(content == "") {                             // <-- this == ""
     $("#left-content).hide();
  }