Checking to see if a div with a certain class contains text or is empty

Question

I'm trying to check in jQuery if an element with a certain class contains some text. If it doesn't contain any text, then I want to remove the class.

<div class="description">


</div>

So by "some text" you mean "something other than whitespace"? — nnnnnn, Jun 27 '15 at 05:50
P.S. What if the element contains other elements, but none of them have text either? E.g., is `

` considered "empty" for your purposes? — nnnnnn, Jun 27 '15 at 05:57
If none of the answers helped or you are still facing trouble let me know so I can help — AmmarCSE, Jun 27 '15 at 13:59

AmmarCSE · Accepted Answer · 2015-06-27T06:03:24.007

Use :empty

$('.description:empty').removeClass('description');

According to documentation

Select all elements that have no children (including text nodes).

console.log($('.description:empty').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="description"></div>

However, if there is poorly formed HTML as in the question(unnecessary whitespace), you will have to take a more manual approach

if ($(this).children().length == 0 && $(this).text().trim() == '')

$('.description').each(function() {
  if ($(this).children().length == 0 && $(this).text().trim() == '') {
    console.log('entered');
    $(this).removeClass('description');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="description">


</div>

Doesn't the example shown in the question have a text node? There is whitespace shown... — nnnnnn, Jun 27 '15 at 05:51
It doesn't select the posted element. It contains textNodes. — Ram, Jun 27 '15 at 05:51

score 0 · Answer 2 · answered Jun 27 '15 at 05:49

0

if(!$('.description').text().length)
    $('.description').hide();

answered Jun 27 '15 at 05:49

hildende

832
1
13
19

Going on the example in the question, I think the OP probably wants to ignore white space. – nnnnnn Jun 27 '15 at 05:56

connexo · Answer 3 · 2015-06-27T05:58:41.903

0

if ($('.description').text().trim()=="") {
    $(this).hide();
else {
    /*non-empty actions */
}

edited Jun 27 '15 at 05:58

answered Jun 27 '15 at 05:49

connexo

53,704
14
91
128

1

Going on the example in the question, I think the OP probably wants to ignore white space. – nnnnnn Jun 27 '15 at 05:56
You're right, I was already editing that when I read your comment. – connexo Jun 27 '15 at 06:00

Mukesh Kalgude · Answer 4 · 2015-06-27T05:52:04.193

0

Try this syntex

if($('.description').innrHTML=='')
{
 $('.description').hide()
}

edited Jun 27 '15 at 05:52

answered Jun 27 '15 at 05:49

Mukesh Kalgude

4,814
2
17
32

jQuery objects don't have an `.innerHTML` property. Also, the example shown in the question has some whitespace in the element. – nnnnnn Jun 27 '15 at 05:52

Checking to see if a div with a certain class contains text or is empty

4 Answers4