如何用JS和CSS移除第三方网站小部件指定文本并保留strong元素

Got it, let's fix this. You want to strip out that "Sidste opkald blev besvaret på" text from the third-party Firmafon widget, but keep the <strong> element showing the answer time. Here's a straightforward approach using vanilla JavaScript and CSS—no fancy frameworks required:

Step 1: JavaScript to Wrap the Extra Text #

First, we need to dynamically wrap the unwanted text in a span so we can target it with CSS. This avoids modifying the widget's source code directly (which you can't do for third-party tools):

// Wait for the page and widget to finish loading
document.addEventListener('DOMContentLoaded', function() {
  // Target the specific status span using its unique class
  const statusContainer = document.querySelector('.Firmafon-call-status-4571995996');
  
  if (statusContainer) {
    // Loop through all child nodes to find the raw text we want to hide
    Array.from(statusContainer.childNodes).forEach(node => {
      // Check if it's a non-empty text node (not the strong element)
      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
        // Create a wrapper span with a custom class
        const textWrapper = document.createElement('span');
        textWrapper.classList.add('firmafon-hide-extra');
        
        // Replace the text node with our wrapper, then put the text inside
        statusContainer.replaceChild(textWrapper, node);
        textWrapper.appendChild(node);
      }
    });
  }
});

Step 2: CSS to Hide the Wrapped Text #

Now add this CSS to hide the wrapped text while leaving the strong element fully visible:

/* Hide the extra text completely */
.firmafon-hide-extra {
  display: none;
}

/* Optional: Preserve styling for the answer time if needed */
.Firmafon-call-status-answer-time-4571995996 {
  /* Add any custom styles here to match your site's design */
}

How This Works #

• The JavaScript waits for the page to load, then finds the widget's status span. It identifies the raw text node (not the strong element) and wraps it in a new span with a unique class.
• The CSS targets that wrapper class and hides it, so only the strong element with the answer time remains visible.

Note for Delayed Widget Loading #

If the widget loads after DOMContentLoaded (common with third-party tools), you might need to use a MutationObserver to watch for the element appearing. Let me know if you need that code too!

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