Supprimer tous les éléments vides à l’aide de la pseudo-classe CSS :empty
Note : Avant de mettre en place un nettoyage du DOM via JS, préférer une solution full-CSS avec la pseudo-classe :empty.
Source : :empty sur CSS Tricks.
|
1 2 3 |
div:empty { display: none; } |
Fonctionnera avec le markup HTML suivant
|
1 2 |
<div></div> <div><!-- test --></div> |
Ne fonctionnera pas avec le markup HTML suivant
|
1 2 3 4 5 6 |
<div> </div> <div> <!-- test --> </div> <div> </div> |
Pour les cas qui ne fonctionnent pas, supprimer les éléments vides qui contiennent un espace insécable à l’aide de jQuery
Source : Remove elements with only a space using jQuery
Le fragment de code suivant trouve l’ensemble des <div /> qui sont vides et les supprime du DOM.
|
1 2 3 4 5 |
jQuery('div') .filter(function() { return jQuery.trim(jQuery(this).text()) === '' && jQuery(this).children().length == 0 }) .remove(); |
|
1 2 3 4 5 6 7 |
// Remove elements with only a space using jQuery jQuery('.cleaner').html(''); jQuery('div:not(.cleaner):not(.mobile-gmaps)') .filter(function() { return jQuery.trim(jQuery(this).text()) === '' && jQuery(this).children().length == 0 }) .addClass('removed-nbsp').html(''); |