Objetivo

Necesitamos comprobar si un contenedor está vacío. El problema es que los navegadores modernos, como Chorme y Firefox, interpretan los espacios en blanco y saltos de línea como contenido, y es por esto que necesitamos un método personalizado.

Cuándo puede ser útil

• Tenemos un elemento DOM correctamente formateado, con su indentado y saltos de líneas en el HTML.
• Queremos saber si ese elemento está vacío, independientemente de esos espacios.

Soporte y dependencias

• jQuery (cualquier versión)

El código

/**
 * Check empty context
 * Checks if a selector or jQuery instance given is empty.
 * Since Chrome & FF consider whitespaces and linebreaks as elements, the check must be
 * performed over the HTML content.
 *
 * @param   {object}        $target         A jQuery selector or its instance         
 * @return  {boolean}                       True if the target is empty. False if not
 */
var checkEmptyContext = function ( $target ) {    
    $target = ( $target instanceof jQuery ) ? $target : $( $target );
 
    return ( $target.length > 0 ) && ! $.trim( $target.html() );
};

Funcionamiento

Como los navegadores modernos interpretan los espacios y caracteres especiales como contenido, tenemos que realizar las comprobaciones no sobre éste, sino sobre las etiquetas HTML.

Ejemplo de uso

Tenemos por ejemplo la siguiente estructura DOM:

<div id="main">
    <div class="container">
 
    </div>
    <div class="container">
        <div class="sub-container">
            <p>Hello World</p>
        </div>
    </div>
</div>

Y queremos aplicar alguna acción (en este caso eliminar) sobre aquellos contenedores con clase ‘container’ que están vacíos (despreciando espacios en blanco y caracteres especiales).

Nótese como el primer ‘container’ presenta un salto de línea y aparece indentado. Sin embargo, para nuestra aplicación, debe considerarse vacío.

$( '.container' ).each( function ( i, ele ) {    
    if ( checkEmptyContext( ele ) ) {
        ele.remove();
    }
} );

O simplificado en sintaxis ES6:

$( '.container' ).each( ( i, e ) => checkEmptyContext( e ) && e.remove() );