How to have the element removed from the dom in javascript?

Question

I need to make it so that the event here removes the element after it fades out but how would I do that? I got it so that the element fades out from a grid that I am using but I want it to be removed completely as well.

   function fadeOut(event){
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
        }
        event.style.opacity = op;
        op -= 0.1;
    }, 50);
}

Answer 1

You just need to .remove() it, but you'd want the interval to go for 50 more ms so that there's time for the element to be visible at 0.1 opacity, else it might look a bit off:

function fadeOut(event){
  var op = 1;  // initial opacity
  var timer = setInterval(function () {
    if (!op){
      clearInterval(timer);
      event.remove();
    }
    event.style.opacity = op;
    op -= 0.1;
  }, 50);
}

Answer 2

see this article

you can use

elementID.parentNode.removeChild(elementID);

Answer 3

You are catching the event here. Thats means you can get the target. You can use ev.target.remove() to remove it. Hope its work for you.

function fadeOut(event){
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            event.target.remove();
        }
        event.style.opacity = op;
        op -= 0.1;
    }, 50);
}