I'm hoping you can help me solve a JS issue we're having.
The Issue: I am removing an element when a class is present, and while this works to remove the element from the DOM via the inspector when I hit CTR-U and search for the element it is still searchable/visible.
The blog article: https://www.leatherhoney.com/blogs/leather-care/diy-leather-car-interior-detailing-tips
Background: The company that developed our website added (2) H1 headers to our blog articles. If the header is present, they are hiding one with CSS. This of course creates issues with multiple H1's on a page, even if it is visually hidden.
The Fix: The fix is to remove the CSS property that is hiding the element and replace it with the remove() function. This would in theory remove the element entirely from the page (and from SEO crawlers) when the CSS class was present.
$(".hide-when-banner-enabled").remove();
The Pages:
Here's the blog page: https://www.leatherhoney.com/blogs/leather-care/diy-leather-car-interior-detailing-tips
Here's the source code page (ctrl-U) where you can still see the class .hide-when-banner-enabled even though it should be removed: https://www.leatherhoney.com/blogs/leather-care/diy-leather-car-interior-detailing-tips
Can anyone explain to me why this is still visible and if there is a better way to go about removing this duplicate H1 tag when a class is present so SEO is not affected by duplicate tags?
Thank you!
The browser receives the HTML document, converts it into a DOM, and runs the JS which modifies the DOM.
The source code is unchanged. It's the source code, not a reflection of the current state.
You wouldn't want web browsers to be able to rewrite the code on your server: That would lead to your homepage being vandalised with new spam 30 times a second.
If you want to change the HTML that the server sends to the browser (or sends to the search engine indexing bot) then you need to fix it on the server.