Say you have an LP section like this:

<div id="intro">
Good to see you back, {{lead.First Name}}. You can still benefit from intro pricing if you sign up before June 1st.
</div>

 

The LP is public, so some sessions will be anonymous and {{lead.First Name}} is empty. Heck, even if the session is associated with a known lead, if you don’t know their First Name you don’t want to fall back to “friendo” or anything.

 

So the whole section must be hidden if {{lead.First Name}} comes up empty.

 

You can do this using just CSS, no JS required! First, put a <span> around the token:

<div id="intro">
Good to see you back, <span id="name-token">{{lead.First Name}}</span>. You can still benefit from intro pricing if you sign up before June 1st.
</div>

 

Then use this CSS:

#intro:has(#name-token:empty) {
  display: none;
}

 

CSS :empty selects elements that are completely empty, including whitespace (a.k.a. have no Text nodes) which will be the case when {{lead.First Name}} is empty. And :has selects elements that contain elements matching another selector.

 

So the combo :has(:empty) means “element that contains an empty element.” Then you can style the parent element to your heart’s content.