使用remove()确保元素在DOM中不可见或通过查看源代码

Question

我希望你能帮我解决我们遇到的 JS 问题。

问题： 当存在类时，我正在删除一个元素，虽然这可以通过检查器从 DOM 中删除该元素，但当我点击 CTR-U 并搜索该元素时，它仍然是可搜索/可见的。

博客文章： https://www.leatherhoney.com/blogs/leather-care/diy-leather-car-interior-detailing-tips

背景： 开发我们网站的公司在我们的博客文章中添加了 (2) 个 H1 标题。如果标头存在，则他们正在使用 CSS 隐藏标头。这当然会产生页面上多个 H1 的问题，即使它在视觉上是隐藏的。

修复： 修复方法是删除隐藏元素的 CSS 属性并将其替换为remove() 函数。理论上，当 CSS 类存在时，这会从页面（以及 SEO 爬虫）中完全删除该元素。

$(".hide-when-banner-enabled").remove();

页面：

这是源代码页（ctrl-U），您仍然可以在其中看到.hide-when-banner-enabled类，即使它应该被删除： https: //www.leatherhoney.com/blogs/leather-care/diy-皮革汽车内饰细节提示

谁能向我解释为什么这仍然可见，以及是否有更好的方法可以在存在类时删除此重复的 H1 标签，以便 SEO 不受重复标签的影响？

谢谢你！

Answer 1

浏览器接收HTML文档，将其转换为DOM，并运行修改DOM的JS。

源代码未更改。它是源代码，而不是当前状态的反映。

您不希望 Web 浏览器能够重写您服务器上的代码：这会导致您的主页每秒被新垃圾邮件破坏 30 次。

如果您想更改服务器发送到浏览器（或发送到搜索引擎索引机器人）的 HTML，那么您需要在服务器上修复它。