-1

How can I remove an HTML element after let's say 2 days.

For example I have a 

<div> Hello there </div>.

I was looking JS .hide and .remove functions but not sure if using JS is the best approach?

Thank you.

Cluendo
  • 81
  • 2
  • 7
  • https://www.w3schools.com/jsref/met_win_settimeout.asp – Alican Balik Mar 29 '18 at 22:12
  • 1
    I don't understand your question in the real world .. will your web page be opened constantly for 2 days? – Shafizadeh Mar 29 '18 at 22:12
  • No, I'm just looking for a simple script to remove HTML element after timed interval or date. Let's say I add "news" div element and want to show up for few days after which it gets automatically removed/hidden. – Cluendo Mar 29 '18 at 22:16
  • 1
    I hardly think your question is about backend ... not frontend. – Shafizadeh Mar 29 '18 at 22:19
  • I agree with Shafizadeh, you would want to do this on the backend as there is no point in delivering something to the client if they will never see it. – David Lee Mar 29 '18 at 22:25
  • primarily opinion-based Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. – Rob Mar 29 '18 at 22:26

3 Answers3

4

The best way to solve this issue without any server side script is using javascript.

Set a single unique ID for the given div and modify the following code as needed.

 // Date(year, month, day, hours, minutes, seconds, milliseconds);
var expire_date_block_1 = new Date(2018, 1, 28, 0, 0, 0, 0);
var expire_date_block_2 = new Date(2018, 4, 28, 0, 0, 0, 0);
if (expire_date_block_1 <= Date.now()) {
    document.getElementById("div-hide-example-1").style.display = "none";
}
if (expire_date_block_2 <= Date.now()) {
    document.getElementById("div-hide-example-2").style.display = "none";
}
<div id="div-hide-example-1"> Expired Block </div>
<div id="div-hide-example-2"> Not Expired Block </div>

Note that the expire date is in the future.

Just did an example on a way to do it. You should adapt and change the code as needed.

As a side note, @Rounin mentioned, you could also do it on css with some preconditions: keep the page open and don't reload it.

Adriano Martins
  • 1,788
  • 1
  • 19
  • 23
  • You would be able to hide the element using CSS, but you won't be able to provide an specific date on when the element should be hidden - which is the requested. – Adriano Martins Mar 29 '18 at 23:10
  • 1
    Although possible, using animation (IIRC, this is the only way to achieve the desired result), that would require keep the page open long enough to be triggered / complete. Using a generic way which may work without any preconditions was the goal I set while answering this question. – Adriano Martins Mar 29 '18 at 23:24
2

You should be able to do this using Javascript timeouts:

setTimeout(() => {
    const elem = document.getElementById("div-1");
    elem.parentNode.removeChild(elem);
}, 2000);
<div id="div-1">
    <p>Div "div-1" will be removed in 2 seconds...</p>
</div>

EDIT: If you are not using ES6 syntax, your Javascript code snippet would look like:

setTimeout(function() {
    var elem = document.getElementById("div-1");
    elem.parentNode.removeChild(elem);
}, 2000);
Tharaka De Silva
  • 61
  • 3
0

For your goal better to use server side, but this working on the browser, if user don't use different browsers

var el = document.getElementById('del');
var deleteTime = localStorage.getItem('timeToDel');
var curDate = new Date().getTime();

if (!deleteTime) {
    deleteTime = curDate + 172800000; //2days by default
    localStorage.setItem('timeToDel', deleteTime);
}

var timeToDelete = deleteTime - new Date().getTime();

if (timeToDelete < 0) {
    timeToDelete = 0;
}

setTimeout(function() {
  el.parentNode.removeChild(el);
}, timeToDelete);
<div id="del"> Hello there </div>
Arrararr
  • 368
  • 2
  • 12