0

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.

kadota
  • 33
  • 5
  • 1
    Which event listener are you using to trigger your modification? Have you logged the closest element to the console, to see if there actually were matches or not? – David Wolf Feb 10 '22 at 22:14
  • Try placing the first line at the bottom of your event handler. – zer00ne Feb 10 '22 at 22:16
  • 1
    Not sure how that dupe fixes this issue. Mutation Observer is what you are going to have to use. – epascarello Feb 10 '22 at 22:26
  • @DavidWolf I've tried with both `jQuery(document).load` and `ready`. Yeah actually the log is returning this `Object { length: 0, prevObject: {…} }`. – kadota Feb 10 '22 at 22:30
  • 1
    load and ready is not going to do anything when it is loaded dynamically. Load and ready have no clue about it. Does this anonymous 3rd party code have an api? Is there an event that says when it loads? If not, you need https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe – epascarello Feb 10 '22 at 22:40
  • @epascarello Thank you! The code uses react, which I'm not great at, but it seems it is working with ReactDOM. Sorry for not mentioning it before. – kadota Feb 10 '22 at 22:53

0 Answers0