Remove div above another is the one below is empty

HTML & CSS
1

Hi,

I have the following code:


<h2>$1.00</h2>
<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?

Thanks!

2

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.

3

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

4

JS:

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

CSS:

div.hidden {
display:none!important;
}

It should look like this. Written in hurry sorry.

5

Sorry JS code should look like this


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

Sorry, hope it is fine now.

6

Hi,
Many thanks, it worked :smiley:

7