How to remove a div with fade out effect in JavaScript?

Question

I want to remove a div element on click event but i want to remove it with a fade out effect. I have got some JQuery solution but i need pure JavaScript or css solution.

document.querySelector('.list').addEventListener("click", function(e){
    if (e.target.localName === "span") {
        var removeTarget = e.target.parentNode.parentNode;
        removeTarget.parentNode.removeChild(removeTarget);
    };
});

This code is removing the div element with no effect. How can i add a fade out effect?

I am working on a small project and i don't want to use any frameworks like JQuery. — PariSh KhAn, Oct 29 '15 at 20:41
Possible duplicate of [Javascript fade in fade out without Jquery and CSS3](http://stackoverflow.com/questions/13733912/javascript-fade-in-fade-out-without-jquery-and-css3) and a host of others found by searching SO. — Rob, Oct 29 '15 at 20:45

score 35 · Answer 1 · answered Oct 29 '15 at 20:58

35

I've made this function a while ago for a personal project:

function removeFadeOut( el, speed ) {
    var seconds = speed/1000;
    el.style.transition = "opacity "+seconds+"s ease";

    el.style.opacity = 0;
    setTimeout(function() {
        el.parentNode.removeChild(el);
    }, speed);
}

removeFadeOut(document.getElementById('test'), 2000);

answered Oct 29 '15 at 20:58

alvarodms

671
5
8

super useful ! very easy ! totally generic ! Just what I was looking for. – Martin Meeser Feb 28 '18 at 08:27
Awesome. Very handy and adaptable. – César Escudero Sep 08 '20 at 19:47
the best one here :) – KcH Apr 30 '21 at 04:32
2

Great solution! By the way you don't actually need to calculate the seconds you can use `ms` in transition. – Aug 26 '21 at 21:51
2

@pheianox Although your edit on the answer improved clarity & simplicity of the code, it is better to [leave a comment](https://meta.stackexchange.com/questions/19756/how-do-comments-work) instead of changing an answer (BTW: see the question in ms `1000`, the function-call in answer is in ms `2000`. – hc_dev Aug 27 '21 at 07:18
Is there a way to fade in? – Halo Jul 20 '22 at 10:29

ZomoXYZ · Accepted Answer · 2022-01-14T23:16:49.980

27

There are two ways you can achieve this: CSS3 animation or jQuery animation.

CSS3 Animation

In your CSS document, add:

.list {
    opacity: 1;
    -webkit-transition: opacity 1000ms linear;
    transition: opacity 1000ms linear;
}

This will make any change of opacity to your item fade by 1000ms.

Change line 4 of your JavaScript to:
```
removeTarget.style.opacity = '0';
setTimeout(() => removeTarget.remove(), 1000);
```
- This will make your item change opacity to 0, thus making the transition from step 1 have an effect. Then it will remove the item with your code after 1000ms.

Note: Make sure the time of the CSS3 transition and the setTimeout are the same.

jQuery Animation

Get jQuery
- Go to the jQuery Website and download it, or
- Add ` in your HTML document before any jQuery code.
Change line 4 of your Javascript to:
```
removeTarget.fadeOut(1000)
```
- This will Fade Out your item by 1000ms, you can change this time to whatever you want.

edited Jan 14 '22 at 23:16

answered Oct 29 '15 at 20:51

ZomoXYZ

1,763
21
44

3

@PariShKhAn Glad I could help, to mark that this worked and for future reference you can press the check mark button toward the top left of my post to accept it. – ZomoXYZ Oct 29 '15 at 21:21
1

very practical although the fixed dependency to the css might be painful at some point later on (1 upvote only :-) ) – Martin Meeser Feb 28 '18 at 08:26
1

Update from 2022: Now you can use `removeTarget.remove();`. No need to access parent and remove child. :-) – vee Jan 09 '22 at 10:32
@vee I wish I realized this was a function a few months ago! I just updated my answer to use this – ZomoXYZ Jan 14 '22 at 23:17

Lee Goddard · Answer 3 · 2022-04-28T22:34:38.803

In 2020 you can forgo use of use setTimeout for the animationend event, removing the need to maintain the duration in two places:

.fade-out {
  animation: fade 2s;
  -webkit-animation: fade 2s;
  -moz-animation: fade 2s;
}

/* Animate opacity */
@keyframes fade {
  from { opacity: 1 }
  to { opacity: 0 }
}
@-moz-keyframes fade {
  from { opacity: 1 }
  to { opacity: 0 }
}
@-webkit-keyframes fade {
  from { opacity: 1 }
  to { opacity: 0 }
}

const elementToFade = document.getElementById('my-element');

elementToFade.onanimationend = (e) => {
  if (e.target.classList.contains('fade-out')) {
    elementToFade.parentNode.removeChild(elementToFade);
  }
};

// To fade away:
elementToFade.classList.add('fade-out');

`event.srcElement` is deprecated now; `event.target` is the recommended property. — Andy Stewart, Apr 28 '22 at 11:42

score 1 · Answer 4 · answered Oct 29 '15 at 20:52

It's a good question, but to animate some element in html, this element has to exist while it is animating. So, you have some ways to do this, a good way is hide this element with CSS and after the animation you remove this element. While you hiding you can animate, you can see this example:

<style>
  .hide{
    opacity: 0; 
   }
  .fade-out {
    transition:1s linear all;
  }
</style>
<span class="list fade-out">

  This is a List, click me to hide

</span>

<script>
  document.querySelector('.list').addEventListener("click", function(e) {
    
    if (e.target.localName === "span") {
      
      //Add CSS hide and animate with fade out
      var currentCSS = this.className;
      this.className = currentCSS + ' hide';
      
      var removeTarget = e.target.parentNode.parentNode;
      setTimeout(function(){
        removeTarget.parentNode.removeChild(removeTarget);
        },1000);
    };
  });
</script>

score 0 · Answer 5 · answered Oct 29 '15 at 21:10

0

Add the following CSS class to the element using elem.className="my-animation"; on click:

.my-animation {
  animation: fade 3s steps(90) forwards;
 -webkit-animation: fade 3s steps(90) forwards;
  -moz-animation: fade 3s steps(90) forwards;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.0;
  }
}

You may control the speed of the animation by modifying the steps(number) as well.

answered Oct 29 '15 at 21:10

Anne Bione

19
2

Simple and functional. Thanks – Davide Dec 08 '17 at 00:57
2

This will not remove the element from DOM, but that is requested in the question. – Martin Meeser Feb 28 '18 at 08:24

score -3 · Answer 6 · answered Oct 29 '15 at 20:40

Just goto jQuery source code, take out the fade code which is in pure javascript, and use it, no need to reinvent the wheel,

or a hint is reduce the height of div to 0 slowly using setTimeInterval()

or a css solution would be to use transform and transition properties

How to remove a div with fade out effect in JavaScript?

6 Answers6

CSS3 Animation

jQuery Animation