How do I remove the content of a div with class `node-inner` only if it contains `href="/test/profile"`?

Question

I have html like this

<div class="node-inner">         
...
  <a href="/test/profile" title="View user profile.">test</a>
...       
</div> 

I want to use usercss to remove the content of <div class="node-inner"> if it contains href="/test/profile".

My approach

.node-inner[class='node-inner'] {
 display: none;
}

filters everything. How do I remove the content of a div with class node-inner only if it contains href="/test/profile"?

Answer 1

You can do it via JS

here's a quick example of doing that through jQuery:

$('.node-inner > [href="/test/profile"]').css('display', 'none')

Fiddle (With jQuery)

And here how you can do it with vanilla javascript:

document.querySelectorAll('.node-inner > [href="/test/profile"]').forEach(function(el) {
  el.style.display = "none";
})

Fiddle (With Javascript)