CODEWITHSUNDEEP
jqueryhtmlcss
Learning and sharing
Learning and sharing

Reputation: 1398

Jquery check if a div is empty omitting: before or: after

I need to check with Jquery if a Div is empty omitting: before or: after, doing this with a div that has a: before or: after takes into account the: before or: after

$(function(){
  if($('#content').not(':empty')) {
    console.log('Yes content');
  } else {    
    console.log('No content');
  }
});
#content:empty {
    position: relative;
    display: block;
    min-height: 200px;
    background-color: rgb(240,240,240);
    text-align: center;
}

#content:empty:before {
    content: 'NO IMAGE';
    position: absolute;
    font-size: 25px;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

Upvotes: 0

Views: 618

Answers (1)

Samuel Cook
Samuel Cook

Reputation: 16828

You could check for HTML or text using the following:

$(function(){
  if( $('#content').html() || $('#content').text() ){
    console.log('Yes content');
  } else {    
    console.log('No content');
  }
});
#content:empty {
    position: relative;
    display: block;
    min-height: 200px;
    background-color: rgb(240,240,240);
    text-align: center;
}

#content:empty:before {
    content: 'NO IMAGE';
    position: absolute;
    font-size: 25px;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>

Examples:

Empty:

<div id="content"></div>

With text:

<div id="content">Hello World</div>

With HTML:

<div id="content">
    <span class="child"></span>
</div>

Upvotes: 1

Related Questions