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

Question

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

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

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

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

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

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

页面：

这是 源代码页 (ctrl-U)，您仍然可以在其中看到 class .hide-when-banner-enabled 即使它应该被删除：https://www.leatherhoney.com/blogs/leather-care/diy-leather-car-interior-detailing-tips

任何人都可以向我解释为什么这仍然可见吗？如果存在 class 时是否有更好的方法来删除这个重复的 H1 标签，从而使 SEO 不受重复标签的影响？

谢谢！

Answer 1

浏览器收到HTML文档，将其转化为DOM，运行修改DOM.

的JS

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

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

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

Using remove() to ensure element is not visible in DOM or by viewing source code