时间戳

首页 > 解决方案 > 使用 JS 或 jQuery 从 DOM 中完全删除元素/标签？

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

问题描述

我正在尝试使用 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 中删除，但当您通过页面源查看页面时仍然存在，并且机器人 / Crowler 仍然可以看到它们。我进行了很多研究，并使用此链接中的代码尝试了纯 Javascript 方法Remove all child elements of a DOM node in JavaScript - removeChild with parentNode：

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

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

我已经检查了从源代码和其他代码中完全删除标签，但是 有没有办法做到这一点 -从源代码中完全删除元素？

标签： javascriptjqueryhtmldom

解决方案

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

您找到的主题已经有了正确的答案：

这就是“查看源代码”在浏览器中的工作方式。它向您显示来自服务器的内容（并且通常从服务器重新查询它[可能从缓存中读取它]），而不是当前页面中的内容。

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

推荐阅读