Changing css element value based on existence of another element on page

Question

I'm working on a store that involves adding art to a product. The individual art counts as a product, so it is automatically assigned an 'available quantity'. This doesn't make sense for artwork that can't be 'out of stock', so I want to hide the quantity on any page that has the category of art.

I only have access to the store's user panel, the css, and javascript. The user panel doesn't have an option to turn off quantity for a product or another workaround. Normally I could just use selectors to relate an 'art' element to the specific css for the 'quantity' element, but the two elements are so distantly related that I don't think css alone will suffice.

My javascript is very rusty but I'm hoping there's a simple way to target any 'quantity' <div> s that are on the same page where a link's title is 'Art'. Changing the <div> to display: none; works perfectly for my purposes. Here's the relevant code:

Answer 1

Yes, you can achieve this with javascript:

// Determine if <a title="Art"> exists in the document
if (document.querySelectorAll('a[title="Art"]').length > 0) {

  // Give .box-qty a style of display: none
  const boxQty = document.getElementsByClassName('box-qty')[0];
  boxQty.style.display = 'none';
}