Remove a DIV with a delay Javascript

Question

this is my first question so forgive me if I don't apply the correct etiquette.

I have a javascript function that hides a div with a fade.

function fadeOut(cloudChatHide)
{
    "use strict";
    cloudChatHide.onclick = function()
        { 
            if(cloudChatHide.className)
                {
                cloudChatHide.className = '';
                } 
            else 
                {               
                cloudChatHide.className = 'fadeout';
                RemoveCloudChat();
                }
        };
}

However this code doesn't remove the DIV which is the RemoveCloudChat Function. Which looks like this:-

function RemoveCloudChat()
{
    "use strict";
    cloudChatHide.remove();
    cloudChatHide.className ='fadeout';
}

What I really want to do is fade the div automatically after a few seconds and then REMOVE it.

The reason I need to REMOVE the div from the window is that its an overlaid div and I need to access the content underneath the 'cloudChatHide' div.

Any help / instruction wouild be gratefully received as I am not the greatest Javascript developer.

Thanks.

Maybe http://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep?noredirect=1&lq=1 can lead you into the right direction. — Reporter, Feb 17 '17 at 10:41
HI thanks for that, TBH I don't really understand whats written there. — motjuice, Feb 17 '17 at 11:08

seabeast · Answer 1 · 2017-02-17T12:10:01.670

You can use CSS transitions to smoothly fade out the element and listen for the transitionend event to remove the element when the transition has finished.

See this jsFiddle.

The transition is defined with this CSS:

div {
  opacity: 1;
  transition: opacity 1s;
}

div.fade-out {
  opacity: 0;
}

As soon as you add the fade-out class to a div it will smoothly reduce its opacity over a period of 1 second. This can be done with the following JavaScript, no jQuery required:

function fadeOutAndRemove(element) {
    element.classList.add('fade-out');
    element.addEventListener('transitionend', function () {
      element.parentNode.removeChild(element);
    });
}

If you want to start the fadeout transition automatically after a fixed delay you could call fadeOutAndRemove after a timeout

window.setTimeout(fadeOutAndRemove.bind(this, elementToHide), 3000)

or add a delay to the transition

transition: opacity 1s 3s;

and initalise the element with the fade-out class

<div class="fade-out"></div>

I think this is the acceptable answer. Well explained and no need for jquery. — tfidelis, Feb 17 '17 at 12:46

Alessandro · Accepted Answer · 2017-02-17T11:20:23.140

0

If you could use JQuery, it will really simple, see following:

<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery.min.js"></script>
</head>
<body>
  <div class="fadeout">I'LL DISAPPEAR IN 3 SECONDS</div>
</body>
  <script>
    function fadeOut()
    {
        $(".fadeout").fadeToggle(500, "swing",function(){
                  this.remove();
                });
    }

    var delay = 3000; //3 seconds
    setTimeout(fadeOut, delay);
  </script>
</html>

When the fade action is completed the div will be removed. I hope it helps you, bye.

edited Feb 17 '17 at 11:20

answered Feb 17 '17 at 10:56

Alessandro

4,382
8
36
70

HI thanks for your answer, however I want the DIV to be REMOVED after a DELAY but without it being clicked on. My original code handles the fade as it stands, what I want is 1. The DIV loads, 2. After a delay of say 5000 the DIV fades 3. then the div is removed and this must all happen without a click or any other interaction by the user. Thanks – motjuice Feb 17 '17 at 11:04
Would you remove the div after a delay from when the page was loaded? – Alessandro Feb 17 '17 at 11:05
Yes, the page loads, the div appears then after a delay fades and then is removed, thats what I need. Thanks – motjuice Feb 17 '17 at 11:17
Let me see if I can implement this BRB – motjuice Feb 17 '17 at 11:26
Sorry - I didn't know I downvoted - how do I change that and upvote? – motjuice Feb 17 '17 at 11:39
1

I fixed my downvote, I am sorry, I didn't mean to do that - I am new here. – motjuice Feb 17 '17 at 11:45
1

Using jQuery just o fade an element is a bit exaggerated. oO – Werner Feb 17 '17 at 12:14
i agree with @Werner. – tfidelis Feb 17 '17 at 12:48

score 0 · Answer 3 · answered Feb 17 '17 at 11:42

Brilliant result from Alessandro Maglioccola

<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery.min.js"></script>
</head>
<body>
  <div class="fadeout">I'LL DISAPPEAR IN 3 SECONDS</div>
</body>
  <script>
    function fadeOut()
    {
        $(".fadeout").fadeToggle(500, "swing",function(){
                  this.remove();
                });
    }

    var delay = 3000; //3 seconds
    setTimeout(fadeOut, delay);
  </script>
</html>

score 0 · Answer 4 · answered Feb 17 '17 at 13:21

Here's a way to do it without Jquery. I'm setting the opacity to 0 waiting 300ms using a setTimeout then do the reverse if it's already hidden.

hideMe = function(selector, self) {
  var elem = document.querySelector(selector);
  if (self.innerHTML == "Hide") {
    elem.classList.add("fade");
    setTimeout(function() {
      elem.classList.add("hidden");
      self.innerHTML = "Show";
    }, 300)
  } else {
    elem.classList.remove("hidden");
    setTimeout(function() {
      elem.classList.remove("fade");
      self.innerHTML = "Hide";
    }, 300)
  }
}

body {
  margin: 0;
}

.header {
  height: 100px;
  width: 100%;
  background: steelblue;
}

#vanish {
  transition: all 300ms cubic-bezier(.25, .8, .25, 1);
}

.redsquare {
  width: 100%;
  height: 225px;
  background: tomato;
  opacity: 1;
}

.hidden {
  height: 0px;
  width: 0px;
}

.fade {
  opacity: 0;
}

button {
  width: 100%;
  height: 25px;
  border: 0px;
  outline: none;
  cursor: pointer;
}

<div class="header"></div>
<button onclick='hideMe("#vanish",this)'>Hide</button>
<div id="vanish" class="redsquare"></div>
<div class="header"></div>

Remove a DIV with a delay Javascript

4 Answers4