Remove div above another is the one below is empty


I have the following code:

<div class="save"><img src="altimages/rcpwl/save-red.png" alt="save" /></div>
<p class="your-saving"></p>
 <span class="bookButton"><a href="#" class="book-button">Book Now!</a> </span></div>

Some paragraphs with the class “your-saving” have content in and some dont.

For the ones that are empty, I would like to remove the div above it with the class “your-saving”

How would I do this?


Your question is a bit muddled (there’s no div above the paragraph with the class “your-saving”) … but anyhow, this is something you’d do with JavaScript or preferably a backend script like PHP.

Sorry, I meant I would like to remove the div with a class=“save” if the paragraph tag class=“your-saving” is empty.


$(' > p.your-saving').each(function() {
         if ($(this).text() == "") {
                   $(this).addClass( "hidden" );


div.hidden {

It should look like this. Written in hurry sorry.

Sorry JS code should look like this

$('').each(function() {
         if ($(this).nextAll('p.your-saving').first().text() == "") {
                   $(this).addClass( "hidden" );

Sorry, hope it is fine now.

Many thanks, it worked :smiley: