Hiding unnecessary code - recommendedComments

Wouldn't it be better to hide it completely with if-else functions? The code is in the DOM but is not used until someone marks the recommended answer.

<section data-controller='core.front.core.recommendedComments' data-url='https://preview.invisionalpha5.com/topic/145-knock-knock-whos-there-alpha-12/?&amp;recommended=comments' class='ipsBox ipsRecommendedComments ipsHide'>
	<div data-role="recommendedComments">
		<header class='ipsBox__header'>
			<h2>Featured Replies</h2>
			

<div class='ipsCarouselNav ' data-ipscarousel='topic-featured-posts' hidden>
	<button class='ipsCarouselNav__button' data-carousel-arrow='prev'><span class="ipsInvisible">Previous carousel slide</span><i class='fa-ips' aria-hidden='true'></i></button>
	<button class='ipsCarouselNav__button' data-carousel-arrow='next'><span class="ipsInvisible">Next carousel slide</span><i class='fa-ips' aria-hidden='true'></i></button>
</div>
		</header>
		
	</div>
</section>