How to conditional hide part of the hit widgets template if the attribute value is empty

If you're looking to hide an element when the hit doesn't have an attribute you can do so by combining the ternary operator with some in line style to hide the element. Using the CSS display property we hide the element when no value is present for the attribute. Here's a code example

 <div style=${hit.url ? '' : 'display:none'}>
   <a href=${hit.url}>Click The Link!</a>
 </div>

In the div style we use the ternary operator to evaluate if the hit.url is present. If it is then we add no styling with the empty quotes. If it isn't then we add the style display none. Display:none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off, so in this case the <a> tag is also not displayed.