How do I remove an image a certain amount of time after its been created in Javascript?

Question

I'm trying to make an image disappear after like 2 seconds but I don't know how to do it.

I've looked online but haven't really found anything useful.

function rockImage() {
    var img = document.createElement("img");
    img.src = "rock.png";
    var src = document.getElementById("compChoiceImage");
    img.setAttribute("width", "100");
    src.appendChild(img);
}

That's the function to create the image I want to add the timer thing into the function.

you could use the `setTimeout()` function. https://www.w3schools.com/jsref/met_win_settimeout.asp — Chris, Jul 10 '19 at 09:24

Robby Cornelissen · Answer 1 · 2019-07-10T09:27:48.650

0

Use setTimeout() with removeChild():

function rockImage() {
    const img = document.createElement('img');
    img.src = 'https://via.placeholder.com/100';
    img.setAttribute('width', '100');
    
    const parent = document.getElementById('div');
    parent.appendChild(img);
    
    setTimeout(() => parent.removeChild(img), 3000);
}

rockImage();

<div id="div"></div>

edited Jul 10 '19 at 09:27

answered Jul 10 '19 at 09:25

Robby Cornelissen

91,784
22
134
156

score 0 · Answer 2 · answered Jul 10 '19 at 09:29

You could set display style to none in the setTimeout function:

function rockImage() {
  var img = document.createElement("img");
  img.src = "https://nyppagesix.files.wordpress.com/2018/04/gettyimages-901333660.jpg?quality=90&strip=all&w=618&h=410&crop=1";
  var src = document.getElementById("compChoiceImage");
  img.setAttribute("width", "100");
  src.appendChild(img);
  setTimeout(() => {
    img.style.display = "none";
  }, 2000);
}

rockImage();

<div id="compChoiceImage"></div>

How do I remove an image a certain amount of time after its been created in Javascript?

2 Answers2