CODEWITHSUNDEEP
javascriptjqueryaloha-editor
Hengjie
Hengjie

Reputation: 4672

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 <br>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.

<br class="aloha-end-br">

<br class="aloha-end-br" style="">

<p style=""><br class="aloha-end-br"></p>

&nbsp; 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).

Upvotes: 0

Views: 340

Answers (2)

Jure C.
Jure C.

Reputation: 3080

Try running .text() on it and then trim for whitespace and nbsp the string that you get. This will remove all of your html tags.

Upvotes: 1

Florian Margaine
Florian Margaine

Reputation: 60807

Just get the text using text(), it doesn't have HTML in it. &nbsp; 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!
}

Upvotes: 1

Related Questions