Using Jquery to determine if a div is empty, excluding any content before or after it

Question

Using Jquery to determine if a div is empty, excluding any content before or after it

I'm looking to use JQuery to determine if a Div is empty without taking into account any content added before or after it. When checking for emptiness, I want to ignore anything placed before or after the div.

$(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>

jquery html css

Answer 1

Answer №1

To determine if there is content in your HTML element, you can use the following code:

$(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>

Here are some examples to illustrate this:

Empty:

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

With text:

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

With HTML:

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

Answer 2

To determine if there is content in your HTML element, you can use the following code:

$(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>

Here are some examples to illustrate this:

Empty:

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

With text:

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

With HTML:

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

Using Jquery to determine if a div is empty, excluding any content before or after it

Answer №1

Similar questions

Try refreshing the webpage if the AJAX Update Panel experiences an issue

Ways to expand the play and pause buttons and adjust the height of an HTML audio player

Ways to eliminate the default underline in MUI typography

What is the best way to generate a fresh JSON object within a react hook function?

What is the process for creating a parent container in which clicking anywhere inside will cause a child container (built with jQuery UI draggable) to immediately move to that location?

The video on YouTube is not displaying

Using .on as a substitute for live will not yield the desired results

Experiencing the issue with the $.getJSON function bug

Concealing Images in HTML Without Reserving Space for Them

Switching between pages and updating the URL without needing to refresh the page, while still maintaining the content even after a refresh

Share a URL and display small previews from it - php

Checking the size of an HTML numerical input field?

Enhanced Custom Code Highlighting for Aptana Studio 3 with support for .less files

CSS - Layering new DIVs over existing DIVs

JavaScript utilizes regex patterns to modify the value located between the characters within an input's name attribute

What's the best way to use Flexbox to center a component with a "fixed width"?

Steer clear of retrieving all the elements from the HTML DOM at once

Discover the secrets to showcasing just the vivid hues of red and green based on a specific threshold with the HTML Meter component

Detecting collisions in JavaScript

Determining the width of an element in terms of percentage