如何隐藏页面中同类class/无class指定元素？CRM plugin内容隐藏咨询

Alright, let's figure out how to hide those unwanted CRM-synced elements when you can't modify the plugin-generated HTML. Since the plugin syncs every 10 minutes, we need solutions that work both initially and after each sync. Here are two solid approaches:

CSS is great for straightforward hiding, and you can force it to override the plugin's styles with !important.

• Hide elements with a specific class
  If the elements you want to hide share a class (e.g., crm-sensitive-data), add this to your site's custom CSS:

  .crm-sensitive-data {
    display: none !important;
  }
  

  The !important flag ensures your rule takes precedence over any styles the plugin injects.

• Hide unclassed specific elements
  To target elements with no class, narrow down the scope to the CRM's parent container (to avoid hiding unrelated elements). For example, if all CRM content lives in a container with class crm-display-container, and you want to hide unclassed <p> tags inside it:

  .crm-display-container p:not([class]) {
    display: none !important;
  }
  

  Adjust the tag (like div, span) and parent container class to match your actual HTML structure.

If you need more control (like hiding elements based on content or dynamic positions), JavaScript works well—especially since we can set it to re-run after each plugin sync.

Option A: Sync with the plugin's 10-minute interval #

Run the hiding logic immediately, then repeat it every 10 minutes to catch newly synced elements:

function hideUnwantedCRMElements() {
  // Hide elements with target class
  document.querySelectorAll('.crm-sensitive-data').forEach(element => {
    element.style.display = 'none';
  });

  // Hide unclassed elements in CRM container
  document.querySelectorAll('.crm-display-container div:not([class])').forEach(element => {
    element.style.display = 'none';
  });
}

// Run once on page load
hideUnwantedCRMElements();

// Re-run every 10 minutes (matches plugin sync frequency)
setInterval(hideUnwantedCRMElements, 10 * 60 * 1000);

Option B: Use MutationObserver (More Efficient) #

Instead of polling every 10 minutes, listen for changes to the CRM container's DOM. This triggers the hiding logic as soon as new elements are added:

const crmContainer = document.querySelector('.crm-display-container');

if (crmContainer) {
  // Create observer to watch for DOM changes in the CRM container
  const observer = new MutationObserver(() => {
    hideUnwantedCRMElements();
  });

  // Configure observer to watch for new child elements
  observer.observe(crmContainer, { childList: true, subtree: true });

  // Initial run
  hideUnwantedCRMElements();
}

function hideUnwantedCRMElements() {
  // Same hiding logic as above
  document.querySelectorAll('.crm-sensitive-data').forEach(el => el.style.display = 'none');
  document.querySelectorAll('.crm-display-container div:not([class])').forEach(el => el.style.display = 'none');
}

Key Notes: #

• Be specific with selectors: Always target elements within the CRM's parent container to avoid accidentally hiding other parts of your site.
• Test selectors: Use your browser's dev tools to inspect the plugin-generated HTML and confirm your selectors match the elements you want to hide.
• Avoid dynamic IDs: If the plugin generates random IDs for elements, don't rely on them—stick to classes, tags, or positional relationships.

内容的提问来源于stack exchange，提问作者Nuboja