How do I remove the background after setTimeOut() is complete?

Question

Without either padding, height or width, the content disappears after a time of 5000 as it's meant to be. But once I include any of the following properties, the background remains after setTimeOut(), only the text disappears. How can I fix this? You can run my code to see what I mean.

const msg = "Welcome";
document.getElementById("alarmmsg").innerHTML = msg;

setTimeout(function(){
document.getElementById("alarmmsg").innerHTML = '';
}, 4000);

.Javascript-Message-disappears-1{
    width: 100px;
    height: auto;
    background-color: crimson;
    text-align: center;
    position: absolute;
    top: calc(100vh - 70px);
    padding: 20px;
    box-sizing: border-box;
}

<body>
        <div class="Javascript-Message-disappears-1" id="alarmmsg"></div>
        
</body>

Remove the class that's styling the background from the element along with the message update, within your `setTimeout()` — mykaf, Dec 08 '22 at 15:47
or you can add this inside your setTimeOut... document.getElementById("alarmmsg").style.backgroundColor = 'none' — kazmi066, Dec 08 '22 at 15:49
Instead of remove the ```innerHTML```, you can use ```document.getElementById("alarmmsg").style.display = 'none';``` to render as though the element did not exist — Grizou, Dec 08 '22 at 15:52
@mykaf can I see how you did this? I am trying the two methods above but none is working — Atman Atos, Dec 08 '22 at 15:52
@kazmi066 can I see how you did this? I am trying the two methods above but none is working. There still needs to be a background but it needs to disappear with the setTimeOut() — Atman Atos, Dec 08 '22 at 15:53
Does this answer your question? [Hide div after a few seconds](https://stackoverflow.com/questions/820951/hide-div-after-a-few-seconds) — 0stone0, Dec 08 '22 at 15:59

score 0 · Answer 1 · answered Dec 08 '22 at 15:54

Is there any reason you can't do the following?

const alarm = document.getElementById("alarmmsg");

setTimeout(function () {
  alarm.innerHTML = "";
  alarm.style.background = "none";
}, 4000);

Or if you need to remove the element:

const alarm = document.getElementById("alarmmsg");

setTimeout(function () {
  alarm.style.display = "none";
}, 4000);

I'm assuming because it is a 'welcome' message that you won't need to toggle the message back on again before the page is reloaded.

score 0 · Accepted Answer · answered Dec 08 '22 at 15:56

Remove the class that's styling the background from the element along with the message update, within your setTimeout()

const msg = "Welcome";
document.getElementById("alarmmsg").innerHTML = msg;

setTimeout(function(){
    document.getElementById("alarmmsg").innerHTML = '';
    document.getElementById("alarmmsg").classList.remove("Javascript-Message-disappears-1");
}, 4000);

.Javascript-Message-disappears-1{
    width: 100px;
    height: auto;
    background-color: crimson;
    text-align: center;
    position: absolute;
    top: calc(100vh - 70px);
    padding: 20px;
    box-sizing: border-box;
}

        <div class="Javascript-Message-disappears-1" id="alarmmsg"></div>

score 0 · Answer 3 · answered Dec 08 '22 at 15:58

Try this so you can completely remove the element from the DOM:

const msg = "Welcome";
document.getElementById("alarmmsg").innerHTML = msg;

setTimeout(function() {
  document.getElementById("alarmmsg").remove();
}, 4000);

.Javascript-Message-disappears-1 {
  width: 100px;
  height: auto;
  background-color: crimson;
  text-align: center;
  position: absolute;
  top: calc(100vh - 70px);
  padding: 20px;
  box-sizing: border-box;
}

<div class="Javascript-Message-disappears-1" id="alarmmsg"></div>

score 0 · Answer 4 · answered Dec 08 '22 at 16:14

To remove the element you may try this :

        const msg = "Welcome";
        document.getElementById("alarmmsg").innerHTML = msg;

        setTimeout(function(){
        document.getElementById("alarmmsg").style.display="none";
        }, 4000);

        .Javascript-Message-disappears-1{
            width: 100px;
            height: auto;
            background-color: crimson;
            text-align: center;
            position: absolute;
            top: calc(100vh - 70px);
            padding: 20px;
            box-sizing: border-box;
        }

<div class="Javascript-Message-disappears-1" id="alarmmsg"></div>

How do I remove the background after setTimeOut() is complete?

4 Answers4