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?
There are two ways you can achieve this: CSS3 animation or jQuery animation.
In your CSS document, add:
.list {
opacity: 1;
-webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear;
}
Change line 4 of your JavaScript to:
removeTarget.style.opacity = '0';
setTimeout(function(){removeTarget.parentNode.removeChild(removeTarget);}, 1000);
Note: Make sure the time of the CSS3 transition and the setTimeout are the same.
Get jQuery
Change line 4 of your Javascript to:
removeTarget.fadeOut(1000)