有没有办法在六个小时后删除 HTML 元素？

Question

我有一张带有“新”字样的图片，表示已发布到我们网站的新文档。我想让 jQuery 在发布 6 小时后删除图片。我该怎么做呢？

这里是元素：

<tr class="pointer">
    <td>
        <a href="~/DocumentPath" target="_blank"></a>
        <img class="germ"  src="~/Image" width="40px" />
        <i class="created" hidden="hidden">April 3, 2020 13:13:00</i>
        Document Title
    </td>
    <td>PDF</td>
    <td>March 2020</td>
</tr>

如您所见，我有一个隐藏的<i> 元素，用于指定文档何时发布到网站。我需要在<i>标签中的时间6小时后删除<img>标签。

如何使用 jQuery 或 JavaScript 做到这一点？

Answer 1

这最好在服务器端完成。您想要这样做的方式假设用户将在同一页面上打开 6 个多小时，或者以相同的状态返回该页面，这不太可能。

我要做的是为created 的帖子添加一个属性，并将其设置为Date.now() 的默认时间，然后让前端代码查找created 的值是否小于6 小时前（1000 * 60 * 60 * 6 毫秒）。

如果是这样，请显示“新”图形。如果没有，不要。

另一种方法是让“新”图形的默认显示为真，然后：

let createdTime = new Date(document.queryselector('i.hidden').textContent);

if (Date.now() - createdTime > (1000 * 60 * 60 * 6)){
    //code to hide the "New" graphic
}

额外的两美分免费：我会为隐藏的i 元素添加一个id 属性，以确保您选择仅，而不是其他可能具有同班

Answer 2

既然你问过如何用 JavaScript 或 JQuery 做到这一点，那就是这样。

我还提供了一个 3 秒的示例来证明它确实有效。

window.setTimeout(function() {
  document.getElementById('sixHours').outerHTML = '';
}, 2160000);

window.setTimeout(function() {
  document.getElementById('threeSeconds').outerHTML = '';
}, 3000);

<div id="sixHours">This will be removed after six hours</div>

<div id="threeSeconds">This will be removed after three seconds</div>

请记住，一旦页面被刷新，计时器就会重新开始。如果您想避免这种情况并仍然让 JavaScript 处理它，您可以在确定的时间将其删除。

编辑

下面的 sn-p 将解析 expiration 中的日期，并找到从那里到现在的毫秒数。然后就像上面的 sn-p 一样，remove 元素将在计时器到期时被删除。将 6 小时添加到计时器，使其在给定时间后 6 小时到期。

var expiration = Date.parse(document.getElementById('expiration').innerHTML);
var diff = expiration - Date.now();

window.setTimeout(function() {
  document.getElementById('remove').outerHTML = '';
}, diff + 2160000);
//2160000ms = 6 hours

<div id="expiration">April 3, 2020 20:00:00</div>

<div id="remove">Will be removed by the date above</div>

Answer 3

使用setTimeout()，但请记住，人们不太可能在一个页面上停留 6 小时，这意味着一旦他们离开，这将失败。每次刷新时，您都必须更改发送的时间。

const testing = true;

if (testing) {
  // BEGIN - Fake date for testing
  const tmpNow = new Date();
  document.querySelector("i.created").innerHTML = tmpNow.toUTCString();
  // END - Fake date for testing
}

const d = document.querySelector("i.created").innerHTML;
const dd = new Date(d);
if (testing) {
  dd.setSeconds(dd.getSeconds() + 3);
} else {
  dd.setHours(dd.getHours() + 6);
}

const ddd = dd.getTime();
const now = Date.now();

if (ddd < now) {
  console.log("Too late");
}

const dt = Math.max(ddd - now, 0);

setTimeout(() => {
  const img = document.querySelector("img.germ");
  img.parentNode.removeChild(img);
}, dt);

<tr class="pointer">
  <td>
    <a href="~/DocumentPath" target="_blank"></a>
    <img class="germ" src="~/Image" width="40px" />
    <i class="created" hidden="hidden">April 3, 2020 13:13:00</i> 03.21.2020 GOA - Alaska Businesses Now Eligible for SBA Economic Injury Disaster Loans (2)
  </td>
  <td>PDF</td>
  <td>March 2020</td>
</tr>

Answer 4

你不明白这里的问题。 正如 R Greenstreet 所说，它需要在服务器端完成。您需要将创建发布日期发送到 UI。

假设您有一个来自服务器的 JSON，您可以在其中添加 post 表单 bata 库的 createDate 属性。

{createDate: date, name......}

您需要将该日期与 Date.now() 进行比较

这里是伪代码：

if(createDate + 6 hours >= Date.now()) then hide your Icon.

Answer 5

您需要使用 Date 将 String 转换为 Date 对象：

new Date("April 3, 2020 13:13:00");

这将创建一个日期对象，但由于没有时区偏移，脚本可能假定为 UTC。您的结果可能是：

"2020-04-03T13:13:00.000Z"

所以考虑指定一个时区。一些浏览器将假定用户本地时区。

$(function() {
  function getDate(cObj, tz) {
    if (tz == undefined) {
      tz = "GMT-07:00";
    }
    var str = cObj.text().trim() + " " + tz;
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
    var nDt = new Date(str);
    console.log(str, nDt);
    return nDt;
  }

  function getHoursPast(thn) {
    // https://stackoverflow.com/questions/19225414/how-to-get-the-hours-difference-between-two-date-objects/19225463
    var now = new Date();
    return Math.floor(Math.abs(now - thn) / 36e5);
  }

  var hours = getHoursPast(getDate($(".created")));
  console.log(hours + " have passed since", getDate($(".created")));
  if (hours > 5) {
    $(".germ").remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="pointer">
    <td>
      <a href="~/DocumentPath" target="_blank"></a>
      <img class="germ" src="~/Image" width="40px" />
      <!--
      Would advise better format
      Example: 2020-04-03T13:00.000-7:00
      -->
      <i class="created" hidden="hidden">April 3, 2020 13:13:00</i> Document Title
    </td>
    <td>PDF</td>
    <td>March 2020</td>
  </tr>
</table>

参考文献

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
• How to get the hours difference between two date objects?
• Getting the client's timezone offset in JavaScript