Trouble deleting elements after .fadeOut()

[dzhax]

I have the following code

 

drops[i].parentNode.removeChild(drops[i]);

 

it is used to remove the element once it reaches a specific top value. I wanted to have that element .fadeOut(350) before removing the element. so i tried:

 

$(drops[i]).fadeOut(350).parentNode.removeChild(drops[i]);

 

But i'm now getting the following error in my console:

 

Uncaught TypeError: Cannot call method 'removeChild' of undefined

 

if more code is needed feel free to ask

[Mudsaf]

So you're trying to remove faded out element? I'm not quite sure is below the answer for you question.

$(drops[i]).fadeOut(350, function() {drops[i].parentNode.removeChild(drops[i]);});

Edited September 5, 2013 by Mudsaf

[dzhax]

 

So you're trying to remove faded out element? I'm not quite sure is below the answer for you question.

$(drops[i]).fadeOut(350, function() {drops[i].parentNode.removeChild(drops[i]);});

Thank you for the prompt response. For some reason that is not deleting the divs though.

 

just having the

 

drops.parentNode.removeChild(drops);

 

works fine but

$(drops).fadeOut(350, function() {drops.parentNode.removeChild(drops);});

 

does not delete them.

 

It does fade them out though. Really weird

[thescientist]

what is your relevant markup/css?

 

you were given an error message

 

Uncaught TypeError: Cannot call method 'removeChild' of undefined

you should investigate it. log drops to the console, and log drops.parentNode. is this a positioned element? maybe it has no parentNode?

[justsomeguy]

It sounds like that code is in a loop, so that when the inner function runs after the animation then i is no longer set to what it was when you set the function up. I think you can use this inside the callback to refer to the element.

[dzhax]

tried using this and that didn't work either.

 

Basically the code that I have is when an object is clicked it creates a div with an image that starts falling from the top of the screen down to a certain point. When it reaches that point it deletes itself.

 

I am just trying to modify it to fadeOut the div before deleting to give it a more appealing effect.

 

Here is all the code that is relevant to making this happen and the code I have been focusing on is Line:12

BaconClicker = {};BaconClicker.Start=function(){     BaconClicker.setInterval = setInterval(function() {          var drops = document.getElementsByClassName('smallBacon'), newY;          if (drops.length == 0) {               clearInterval(interval);               return;          }          for (var i = 0; i < drops.length; i++) {               newY = drops[i].offsetTop+3;               if (newY > drops[i].parentNode.offsetHeight) {                    $(drops[i]).fadeOut(350, function() {                         this.parentNode.removeChild(drops[i]);                    });              } else {                   drops[i].style.top = newY + 'px';              }          }     }, 30);     BaconClicker.click=function(){          //Increment bacon strips and other stuff          BaconClicker.dropBacon();     }     BaconClicker.dropBacon=function(){          var x = randomFromInterval(10, 200),          y = -75;          n = 0;          strop(x, y, n, 'leftWindow');     }} function strop(cleft, ctop, d, dropWindow) {     var drop = document.createElement('div');     drop.className = 'smallBacon';     drop.style.left = cleft + 'px';     drop.style.top = ctop + 'px';     drop.id = d;     document.getElementById(dropWindow).appendChild(drop);} function randomFromInterval(from, to) {     return Math.floor(Math.random() * (to - from + 1) + from);}

Edited September 5, 2013 by dzhax

[justsomeguy]

this.parentNode.removeChild(this);

[dzhax]

wow why didn't i think of that. Thanks JustSomeGuy! works like a charm