Hide DIV If If Variable Is Empty

I'm developing a wordpress based site using custom fields. It is basically a database of company sites we serve hosted locally on our systems for our reference only.

The fields are manually inserted into the single.php file which outputs the variables typed into the text box in the "add new post" page.

For example <?php the_field('domain'); ?> outputs the domain such as ds02.jamies.local in plain text.

Here is a small excerpt of the page:

Code:

The div "post3" is basically a big box with a border and background. Inside that is the title for the box, then the php variable enclosed in a div "inside" underneath.

Now in most cases, we do not have all the information. There is around 40 boxes and if only 10 are filled in, its quite a headache scrolling past 30 empty boxes trying to find filled in one.

Is there a way, using simple javascript to simply hide those empty boxes?

My coding is quite poor, but im trying to learn. Ive tried this and it was a partial success on jsfiddle but nothing on the site itself

Code: