I'm working with a third-party code and I'm quite limited in terms of filtering a list of elements.

Each of these elements has this structure:

<div class="item-preview">
   <div class="item-info">
      <div class="tag">
         <svg class="tag-public"></svg>
      </div>
   </div>
</div>

The only thing that changes is the svg class, so it's whether tag-public or tag-private. Depending on the user type that's checking the content, I'd like to hide it when it's tag-private. I've tried this:

$('.tag-private').closest('.item-preview').hide();

And this:

$('.tag-private').parents('.item-preview').hide();

But any of them works. The code uses React and the items are brought by JSON/AJAX, so I guess the problem is related to trying to modify the page once is loaded...

Any thoughts on how to make my JS "override" the original code? Thanks a ton.