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?

Answer 1

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);