使用 JS 或 jQuery 从 DOM 中完全删除元素/标签？

Question

我正在尝试使用 JS 从我的 FE 环境中删除空的 H1 标签。在我删除它之后，机器人和爬虫仍然可以看到这些标签 = 它们仍然可以通过页面源看到，DOM 节点也被加载等等..

有没有办法从 DOM 中完全删除一个元素？

我的 html 是这样的：

<a href="/link"><img src="banner.jpg" title="Title" />
  <h1 class="nivo-h1-title">
    <span></span>
  </h1>
</a>

首先我尝试了jQuery方法：

$( document ).ready(function() {
    $( ".nivo-h1-title" ).remove();
});

通过这种方式，元素会从最终的 HTML 中移除，但在您通过页面源查看页面时仍然存在，并且机器人/爬虫仍然可以看到它们。 我进行了很多研究并尝试使用来自此链接Remove all child elements of a DOM node in JavaScript - removeChild with parentNode 的代码的纯Javascript方法：

var elements = document.getElementsByClassName('nivo-h1-title');
while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
}

但是 html 元素仍然在 DOM 中 = 仍然可以通过 Page Source 看到。

我已经检查过这个Completly remove a tag from the source 和其他人，但是 是否有办法做到这一点 - 完全从源中删除元素？

Answer 1

JavaScript 在初始页面提供给客户端之后 执行。没办法。您必须将该逻辑从客户端 JavaScript 移动到服务器端语言，例如php。这样，它将在页面被提供之前被删除。

你找到的话题已经有the right answer:

这就是“查看源代码”在浏览器中的工作方式。它告诉你什么 来自服务器（并且通常从服务器重新查询它[ 可以从缓存中读取])，而不是当前页面中的内容。

要查看页面中当前的内容，您需要使用浏览器开发工具中的“元素”或“DOM”选项卡（通常通过 F12 或 Ctrl+Shift+I 打开）。您通常可以通过右键单击页面上的元素并选择“检查元素”来打开它并移动到特定元素，因此如果您在 $('.de').remove(); 之后使用表单执行此操作；运行时，您将看到其中没有 .de 元素的表单。