Ggtcf

I've been trying to figure out a solution for a problem I am having on a website but I'm not very good with jquery/javascript.

The page we have renders some javascript after the page has loaded and renders a bunch of html/css on the page, the part we are interested looks like the following:

<div class="profile-list">
<a class="profile-profile" href="https://website.com/?profile=joe_blogs_337#show_more">Add loads of html</a>
<a class="profile-profile" href="https://website.com/?profile=sam_smith_292#show_more">Add loads of html</a>
<a class="profile-profile" href="https://website.com/?profile=john_doe_31#show_more">Add loads of html</a>
<a class="profile-profile" href="https://website.com/?profile=stack_overflow_17#show_more">Add loads of html</a>
</div>

I am wanting to only show certain profiles, if there any any profiles that do not match then we don't care about them.

I have tried doing it with CSS for example, I can hide individually via:

a.profile-profile[href$='?profile=stack_overflow_17#show_more'] 
 display: none !important;

I can hide all except one via:

a.profile-profile:not([href$='?profile=stack_overflow_17#show_more']) 
 display: none !important;

However, If I try and hide all except two they all show hidden...

a.profile-profile:not([href$='?profile=stack_overflow_17#show_more']), a.profile-profile:not([href$='?profile=john_doe_31#show_more']) 
 display: none !important;

I'm assuming I can't do this via CSS, therefore I am looking for a fast javascript solution...

Is there a way I can detect when the external js fires so it modifies the rendered HTML as fast as possible?

I'd rather not hide all of the links via:

.main_content .profile-list .profile-profile
 display: none;

To then use

$("a[href$=?profile=stack_overflow_17#show_more]").show();
$("a[href$=?profile=john_doe_31#show_more]").show();

Any help with the jQuery/Javascript would be appreciated

While you want to filter more hrefs.. You can create an array of expected hrefs then use .filter() with .indexOf() to hide/show them

^{For exact strings}

var a_Links = [
 "?profile=stack_overflow_17#show_more",
 "?profile=john_doe_31#show_more"
 // add more expected href's .....
];
$('a').filter(function()
 return a_Links.indexOf($(this).attr('href')) > -1
).hide(); // to show use `.show()`

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a class="profile-profile" href="just">A Link</a>
<a class="profile-profile" href="?profile=stack_overflow_17#show_more">Another Link</a>
<a class="profile-profile" href="?profile=john_doe_31#show_more">Another 2 Link</a>

^{The opposite And specifically the links inside .profile-list element And contains function to find any of strings in the array indexOf any of href}

var a_Links = [
 "?profile=stack_overflow_17#show_more",
 "?profile=john_doe_31#show_more"
 // add more expected href's .....
];
$('.profile-list a.profile-profile').filter(function()
 return contains(a_Links , $(this).attr('href').trim().toLowerCase()) !== 1;
).hide(); // to show use `.show()`


function contains(a , href) 
 var founded = 0
 for (var i = 0; i < a.length; i++) 
 if(founded == 1)break;
 founded = (href.indexOf(a[i]) > -1) ? 1 : 0;
 
 return founded;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="profile-list">
 <a class="profile-profile" href="just">A Link</a>
 <a class="profile-profile" href="link?profile=stack_overflow_17#show_more">Another Link</a>
 <a class="profile-profile" href="link?profile=john_doe_31#show_more">Another 2 Link</a>
</div>


<div class="another-profile-list">
 <a class="profile-profile" href="just">A Link</a>
 <a class="profile-profile" href="?profile=stack_overflow_17#show_more">Another Link</a>
 <a class="profile-profile" href="?profile=john_doe_31#show_more">Another 2 Link</a>
</div>

Try this:

let removeProfiles = [
'?profile=stack_overflow_17#show_more',
'?profile=john_doe_31#show_more',
];

$('a.profile-profile').hide();

removeProfiles.forEach(profile=>

 $('a.profile-profile[href$="'+profile+'"]').show()

)