JQuery Node check if not empty

Question

My html markup can look as following:

<h2></h2> <!-- empty -->
<h2>text</h2> <!-- not empty -->
<h2><p>text</p><h2> <!-- not empty -->
<h2><p></p>/<h2> <!-- empty -->
<h2><p><span></span></p></h2> <!-- empty -->

Is there a way to check if the h2-element itself or the h2-element with n-children nodes contains any html-content.

So far I have tried

 if ( $('h2').html() !== '' ) ...
 if ( $('h2 *').html() !== '' ) ...
 if ( $('h2').html().length ) ...

EDIT: Just to clarify, I want this code working for every h2. The number of children nodes/nested children nodes within the h2-node is unknown.

See here: http://stackoverflow.com/questions/6813227/how-do-i-check-if-an-html-element-is-empty-using-jquery — JKaan, Nov 13 '14 at 12:51
As Moshikaro said, look there and don't forget to check about children `$elem.children().length == 0` — Razvan Dumitru, Nov 13 '14 at 12:56
I have created jsfiddle demo, please check [here](http://jsfiddle.net/turepcw6/1/) — Domain, Nov 13 '14 at 13:16

score 3 · Answer 1 · answered Nov 13 '14 at 12:52

3

What about :empty?

if ($('h2').is(':empty')) {...}

answered Nov 13 '14 at 12:52

pavel

26,538
10
45
61

:empty is bad in FF, Safari – Razvan Dumitru Nov 13 '14 at 12:55

score 2 · Answer 2 · answered Nov 13 '14 at 12:52

2

Just check if the element you want has children and also check if has any text value.

$('h2').children().length === 0 && !$('h2').text();

answered Nov 13 '14 at 12:52

ianaya89

4,153
3
26
34

This won't work for text nodes... `
text
` – CodingIntrigue Nov 13 '14 at 12:53
@RGraham you are right, I've updated the answer. – ianaya89 Nov 13 '14 at 12:55

score 1 · Answer 3 · answered Nov 13 '14 at 12:53

1

Use jQuery's .text() instead of .html():

 if ( $('h2').text().length )

answered Nov 13 '14 at 12:53

Yotam Omer

15,310
11
62
65

Praveen Kumar Purushothaman · Answer 4 · 2014-11-13T12:59:57.080

You can even use:

if ($("h2").html().trim().length == 0) {...}

This works for text nodes too!

$(document).ready(function(){
  $("h2").each(function(){
    if ($(this).html().trim().length == 0)
      $("#result").append("Empty<br />");
    else
      if ($(this).text().trim().length == 0)
        $("#result").append("Empty<br />");
      else
        $("#result").append("Not Empty<br />");
  });
});

* {font-family: 'Segoe UI', sans-serif;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2> <!-- empty -->
<h2>text</h2> <!-- not empty -->
<h2><p>text</p></h2> <!-- not empty -->
<h2><p></p></h2> <!-- empty -->
<h2><p><span></span></p></h2> <!-- empty -->

<div id="result"></div>

JQuery Node check if not empty

4 Answers4

text