Is there a way to remove and HTML element after six hours?

Question

I have a picture with the word "NEW" over it to designate a new document that has been posted to our website. I would like to have jQuery remove the picture after 6 hours of it being posted. How would I go about doing this?

Here is the element:

<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>

As you can see, I have a hidden <i> element that designates when the document was posted to the website. I need to remove the <img> tag 6 hours from the time in the <i> tag.

How can I do this using jQuery or JavaScript?

Could you give me an example? – NMeneses Apr 03 '20 at 21:45 — NMeneses, Apr 03 '20 at 21:45

R Greenstreet · Answer 1 · 2020-04-03T22:22:39.227

This would be better done server-side. The way you want to do it assumes that the user will have this same page up for 6+ hours, or come back to this page in the same state, which is pretty unlikely.

What I would do is add a property to the post for created and have it set a default time of Date.now(), and then have front end code look for whether that created value was less than 6 hours ago (1000 * 60 * 60 * 6 miliseconds).

If so, show the 'New' graphic. If not, don't.

Another way to do it so that you don't have to update server-side stuff that might be more set in stone is to have the default display for the "New" graphic to be true, then:

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

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

A little extra two cents for free: I would add an id attribute to that hidden i element to make sure you're selecting only that and not something else that may have the same class

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Since you asked how to do this with JavaScript or JQuery, this is how.

I also included a 3-second example to show that it does work.

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>

Keep in mind, that as soon as the page is refreshed, the timer will start over. If you want to avoid this and still have JavaScript handle it, you could have it removed at a definite time.

Edit

The snippet below will parse the date in expiration and find the milliseconds from that till now. Then like the snippet above, the remove element will get removed when the timer expires. 6 hours are added to the timer to make it expire 6 hours from the given time.

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>

This doesn't actually acknowledge the `` tag's value that the OP mentioned. — zero298, Apr 03 '20 at 22:03

zero298 · Answer 3 · 2020-04-03T22:02:38.987

Use setTimeout(), but bear in mind that people aren't likely going to sit at a single page for 6 hours meaning this will fail as soon as they navigate away. You'll have to change the time sent over every time they refresh.

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>

Twisty · Answer 4 · 2020-04-03T23:00:32.977

You will need to use Date to convert the String into a Date Object:

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

This will create a Date Object, yet since there is no Timezone Offset, the script might assume UTC. Your result might be:

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

So consider specifying a Time Zone. Some browsers will assume the Users local Timezone.

$(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>

References

score 0 · Answer 5 · answered Apr 03 '20 at 23:00

You don't understand the problem here. As R Greenstreet said it needs to be done server-side. You need a Create Post Date to be sent to UI.

Let's assume you have a JSON coming from a server where you can add createDate property of a post form bata base.

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

You need to compare that date with Date.now()

Pseodu Code here:

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

Is there a way to remove and HTML element after six hours?

5 Answers5

Edit