How to check if html looks 'empty'

I'm working with Aloha-Editor (AE) and as explained here, Aloha appears to do some funky things with  s and paragraphs so that even if I have something that appears to look empty, it in fact isn't in the HTML code (see following).

The following are examples of the underlying HTML that Aloha can sometimes produce when it appears to look empty.

 

 

 

  This isn't something Aloha produces, but if I added a space, it would still look empty.

My question is how can I 'trim' the contenteditable's html content so that I know that it appears empty. The reason why I would want to use something like this, is so that I can know if I should send the content editable update back to the server (if it has content), or if I should delete simply delete the contenteditable element and tell the server it has been deleted (if it is empty).

Solution

Just get the text using text(), it doesn't have HTML in it.   are spaces, so you have to trim them. Here is a simple function:

function isEmpty( el ) {
    return $.trim( el.text() ) === '';
}

Usage:

if ( isEmpty( $( '#someId' ) ) {
    // It's empty!
}