Webflow & Javascript: How can I hide search result items with a blank page in Webflow that contain "/sku/" in the URL using Javascript?

To hide search result items in Webflow when their URL contains "/sku/" and they link to a blank page, use JavaScript to manipulate the search result DOM elements.

1. Add Custom JavaScript in Webflow

• Go to Webflow Designer and open Page Settings.
• Scroll to the "Before Tag" section.
• Paste the following JavaScript inside:

document.addEventListener("DOMContentLoaded", function () {    // Select all search result links    document.querySelectorAll('.w-dyn-item a').forEach(function (link) {        if (link.href.includes('/sku/')) {            // Check if the page is blank by fetching content            fetch(link.href).then(response => response.text()).then(html => {                if (!html.trim()) {                    // Hide the parent search result item                    link.closest('.w-dyn-item').style.display = 'none';                }            }).catch(() => {                // If an error occurs (e.g., 404), hide the item                link.closest('.w-dyn-item').style.display = 'none';            });        }    });});

2. Explanation of the Code

• Select all search result links inside w-dyn-item (which Webflow uses for dynamic collections).
• Check if the href contains /sku/, indicating a product-related page.
• Fetch the page content to determine if it's empty.
• If the page is blank or returns an error, hide the search item (.w-dyn-item).

3. Publish and Test

• Publish your Webflow site.
• Run a search query containing SKU-related results.
• Confirm that blank pages aren't displayed in search results.

Summary

This JavaScript snippet removes search results dynamically by checking if their URLs contain "/sku/" and if their content is empty. If blank, the corresponding .w-dyn-item is hidden.