Есть ли способ удалить и элемент HTML через шесть часов?

Question

У меня есть изображение со словом «NEW», обозначающее новый документ, который был размещен на нашем веб-сайте. Я бы хотел, чтобы jQuery удалил фотографию через 6 часов после ее публикации. Как бы я go сделал это?

Вот элемент:

<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>, который обозначает, когда документ был опубликован на сайт. Мне нужно удалить тег <img> через 6 часов от времени в теге <i>.

Как это сделать, используя jQuery или JavaScript?

Answer 1

Поскольку вы спросили, как это сделать с 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, вы можете удалить его в определенное время.

Редактировать

Фрагмент ниже проанализирует дату в expiration и найдите миллисекунды от этого до сих пор. Затем, как и в приведенном выше фрагменте, элемент 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 2

Это было бы лучше сделать на стороне сервера. То, как вы хотите это сделать, предполагает, что у пользователя будет та же самая страница в течение 6+ часов, или он вернется на эту страницу в том же состоянии, что весьма маловероятно.

Я бы добавил свойство к сообщению для created, установив для него время по умолчанию Date.now(), и затем передний код проверял, было ли это значение created меньше 6 часов go (1000 * 60 * 60 * 6 милисекунд).

Если это так, покажите график «Новый» c. Если нет, то не надо.

Еще один способ сделать это, чтобы вам не приходилось обновлять содержимое на стороне сервера, которое может быть более увязано в камне, - это отображать по умолчанию отображение «New» graphi. c, чтобы быть правдой, тогда:

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

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

Несколько дополнительных двух центов бесплатно: я бы добавил атрибут id к этому скрытому элементу i, чтобы убедиться, что вы выбираете только это, а не что-то еще, что может иметь тот же класс

Answer 3

Вы не понимаете проблему здесь. Как сказал Р. Гринстрит, это должно быть сделано на стороне сервера. Вам необходимо создать дату публикации, чтобы отправить ее в пользовательский интерфейс.

Предположим, у вас есть JSON, поступающий с сервера, где вы можете добавить свойство createDate базы данных формы сообщения.

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

Вам необходимо сравнить эту дату с Date.now ()

Код псевдонима здесь:

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

Answer 4

Вам понадобится использовать Date для преобразования строки в объект Date:

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

Это создаст объект Date, но, поскольку нет смещения часового пояса, сценарий может принять UT C , Ваш результат может быть:

"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
• Как получить разницу часов между двумя объектами даты?
• Получение смещения часового пояса клиента в JavaScript

Answer 5

Используйте setTimeout(), но имейте в виду, что люди вряд ли будут сидеть на одной странице в течение 6 часов, то есть это потерпит неудачу, как только они уйдут. Вам нужно будет менять время отправки каждый раз, когда они обновляют sh.

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>