I want to be able to check if an element contains any text inside of it. I want to be able to remove the element if there isn't any text in it.

However, this dom element might contain a children, or more, and those children might contain other children as well. So I want to be able to follow the dom tree of the element and search through all of the elements inside it for text.

Something like this:

<div id="myElement">
  <span></span>
  <span></span>
  <span>
    <span></span>
    <span>b</span>
  </span>
</div>

Now the div directly doesn't have any text, however it's children have. How can I check if there is any text in the whole div?

Edit:

Apparently I have a ​ character in one of the spans, which I know is a zero width white-space. So basically even though there is no text, the jQuery text() finds it as one and returns false.

How do I get around that?

I want to be able to check if an element contains any text inside of it. I want to be able to remove the element if there isn't any text in it.

However, this dom element might contain a children, or more, and those children might contain other children as well. So I want to be able to follow the dom tree of the element and search through all of the elements inside it for text.

Something like this:

<div id="myElement">
  <span></span>
  <span></span>
  <span>
    <span></span>
    <span>b</span>
  </span>
</div>

Now the div directly doesn't have any text, however it's children have. How can I check if there is any text in the whole div?

Edit:

Apparently I have a ​ character in one of the spans, which I know is a zero width white-space. So basically even though there is no text, the jQuery text() finds it as one and returns false.

How do I get around that?

• javascript
• jquery
• html
• css
• dom

5 Answers 5

None of these answers use innerText, which might be the simplest.

innerText gets the rendered text of the current node and all descendants.

So to check if your node's subtree has any text in it, you can use this one liner:

myNode.innerText.trim() === '';

If this expression evaluates true, there's no text in myNode or its children.

jQuery's text() method includes descendants, so:

$('.my-element-class').each(function() {
    if ( $(this).text() === '' ) {
        $(this).remove();
    }
});

To check all descendant elements individually we have to get a little more plex:

$('.my-element-class').find('span').andSelf().each(function() {
    ...

http://api.jquery./text/

iterate through all the descendants of myElement and check their html(). if the value is not empty "" then iterate that object recursively.

$( "#myElement" ).find( "*" ).each( function(){

   var $element = $(this);
   if ( $.trim( $element.html() ).length == 0 )
   {
     $element.remove();
   }

});

Just use the jQuery function text() to check if any text is inside (it's going to ignore the html tags inside any how, so no need to worry about children inside.) You can use trim if you want to remove the whitespaces.

var text = $('#myElement').text();
var trimedText = text.trim();

Remove the zero width white space:

var text = trimmedText.replace(/[\u200B\uFEFF]/gm,'');

A JS Solution

This function recursively checks and removes empty elements(nested or not), it also deals with the white space issue.

        function removeEmptyElements(elem) {
            var childNodes = elem.childNodes;
            var allEmpty = true;
            for (var index in childNodes) {
                if (childNodes[index]) {
                    if (childNodes[index].nodeType === 3 && !/^\s*$/.test(childNodes[index].textContent)) {
                        allEmpty = false;
                    }
                    else if (childNodes[index].nodeType === 1) {
                        if (!childNodes[index].hasChildNodes()) {
                            //here childNodes[index] is the empty element
                            childNodes[index].parentNode.removeChild(childNodes[index]);
                        } else {
                            //do a recursive call to check whether any of the nested elements are empty
                            removeEmptyElements(childNodes[index]);
                        }
                        allEmpty = false;
                    }
                }

            }
            if (allEmpty) {
                //here elem is the empty element
                elem.parentNode.removeChild(elem);
            }
        }

Pass the 'root' element, myElement in your example, to the function removeEmptyElements.

In words, it goes as follows:

• get all the child nodes of the root element.

• by default assume that all child nodes are empty/white space.

• iterate through each of the child nodes.

• if one of those child nodes are not non-white space text, set allEmpty to false since it is now known that the root element is not empty

• else if the child node is a valid element:

  • check whether it has any child nodes, and if not, remove it

  • if it has child nodes, do a recursive call with that element

  • since it is now known that the root element contains valid elements, it is no longer considered empty, so set allEmpty to false.

• if allEmpty has not been set to false then the root element is empty and thus you can remove it.