To conditionally render part of the Hit item template you can use the conditional (ternary) operator in conjunction with a css class with a display of "none". For example in this CodeSandBox the very first hit "Amazon - Fire TV Stick with Alexa Voice Remote - Black" has had the attribute "price" removed from the record.
If you pass the price attribute in the item template this record will display undefined for its price value. To solve this we add a ternary operator to the class of the <p> tag. We use the ternary operator to dynamically evaluate if hit.price has a value.
If it does have a value we pass it the class 'price box' which has all our css for our blue box. If its undefined we pass it the class 'missing-attribute' which has display set to 'none'. Here's the relevant code from the app.js and app.css that makes this work.
<p class='${hit.price ? 'price-box' : 'missing-attribute'}'>
${hit.price}
</p>
.price-box {
background-color: blue;
color: white;
padding: 2px;
margin-left: 10px;
max-width: 50px;
}
.missing-attribute {
display: none;
}
The CodeSandBox shows the above code in action. You can see the first record which is missing the price attribute does not display the <p> html element since the price attribute is undefined for that record, while all the other hits display the price.