Add style to 'product list' with no content

[graphicz]

I use some script to hide div.product-details when empty:

<script>
$("div.product-details").filter(function(){
return $(this).text().trim() == ""
}).remove();
</script>

.product-details:empty {
display: none!Important;
width:0;
margin:0;
padding:0;
border:0;
}

The problem is that div.product-list has a margin-bottom of 50px;

Although 'empty' the script above does not work for the div.product-list

How may I apply a style to the div.product-list when all it contains is empty, hidden divs?

Thank you!

https://www.graphicz.gb.net/sv2relea...-Earrings.html

[NormanRouxel]

Looks like your JavaScript is located above the stuff you want it to work on. And is set to execute when it is encountered in the pages HTML. So it won't see the code it's meant to work on.

Run it when the DOM is loaded.

<script>
$(document).ready(function(){
	$("div.product-details").filter(function(){
		return !$.trim($this.text())
		}).remove();
	});
</script>

[graphicz]

Thank you very much Norman, I have also added 'visibility:hidden;' to the styles and that seems to do the trick.

.product-details:empty {
display: none!Important;
visibility:hidden;
width:0;
margin:0;
padding:0;
border:0;
}

There is an exclamation mark in your code absent in my original and it seemed to generate an error

return !$.trim($this.text())

This in the JS Header Functions seems to work OK.

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22">
<script>
$(document).ready(function(){
$("div.product-list").filter(function(){
return $(this).text().trim() == ""
}).remove();
});
</script>
</actinic:block>

Thank you again