Narrow down CSS selector to data-option-id

With the code below, I’m hiding a product option from a Shopify app. I need to narrow down the CSS selector to a data-option-id attribute so that only that product option is hidden in case I add another option to the page.

{% if template contains "product" and product.handle == "copy-2-add-a-custom-logo" %}
  if (getCookie(customLogoCookie) == "1") {
    let myInterval = setInterval(function() {
      const customLogoOptionSetId = "gsAppContainer";  // Fixed id
      let customLogoSelector = document.getElementById(customLogoOptionSetId);
      if (!customLogoSelector) {
        return;
      }

      clearInterval(myInterval);

      // Hide the custom options. We need to go 3 levels up.
      customLogoSelector.style.display = "none";

>Solution :

You can use the attribute selector when you want to hide div your arrow points to.

[data-option-id="yourIDhere"] {
  display: none;
}

When you want to hide the parent id="gsAppContainer" you have to either work in your template or via JavaScript, as there are no CSS selectors to style parents in CSS 3.

const childElement = document.querySelector('[data-option-id="yourIDhere"]');
childElement.closest('#gsAppContainer').style.display = "none";