Jump to content

Createchild And Removechild


Shakazahn

Recommended Posts

I'm not sure if this is the right section, I'm guessing it's XML because the child things I found were on XML ref. guide.I'm trying to make a JS function that writes a code when an event is held, but I'm having some trouble with it.

document.onclick = mouseEffects()function mouseEffects(){	 var mouseAnimate = document.createElement('div');	 mouseAnimate.setAttribute('id', 'animation');	 	 document.getElementById('mainBody').appendChild(mouseAnimate);	 document.getElementById('animation').innerHTML = "<div style=\"position:absolute; left:100px; top:100px;\">MouseEffect Here!</div>";}

Well this is working so far, every mouse click creates one of these for me. But I'm having trouble deleting them.At first I tried:

function deleteMe(){	 var deleteMePls = document.getElementById('mainBody');	 deletedChild = deleteMePls.removeChild(deleteMePls.childNodes[0]);}

I couldn't find more specific info on this removeChild method, but from what I could get is:childNode[0] is my site, when I clicked it the "body" would disappear.childNode[1] is the new element I created, it worked, it deleted everything in the order they were created (if I made 10, it would go deleting 1 > 10)childNode[2] would delete everything, backwards though. If I made 10 elements, it would delete 10 > 1 but woudn't delete the 1 (which was the first one that appeared)Anyway, it was fine with childNode[1] but when I tried it on IE (I was using FF) it wasn't deleting the right thing.So I'm looking for any methods that would work on both browsers.If it helps, what I'm trying to do is a code that displays a mouse animation (a growing circle) everytime the mouse is clicked, which disappears 2~3 seconds later.I'm still figuring how to create and delete one, but I think I'll need something to create diff. variable names for various IDs and a reset at some point.Any help is appreciated, thanks

Link to comment
Share on other sites

To use removeChild you have to refer to the direct parent of the element you're removing. I always do this:

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

It can't fail. Don't forget to actually define the node you want removed.

Link to comment
Share on other sites

To use removeChild you have to refer to the direct parent of the element you're removing. I always do this:
nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

It can't fail. Don't forget to actually define the node you want removed.

Hum, I couldn't make this work.I progressed a bit and I'm able to create and delete one of the animations, using the lastChild.But it has a bug that if you click again before the 1st animation ends it'll delete the 2nd only, leaving the 1st there... I'm looking for a way to save and delete it by refering to it directly, but I can't figure how to (using document.getElementById('name') doesn't seem to work the way I need).
<body onclick="mouseEffect(event)">...var mouseAnimationNumber = 0;function mouseEffect(event){	 mouseAnimationNumber++;	 newAnimation = new animateMouse(mouseAnimationNumber);}function animateMouse(mouseAnimationNumber){	 var animationFrame = 0;	 var newTimer;	 newAnimation = document.createElement('animationTag');	 newAnimation.innerHTML = "<img src=\"anim0.png\" id=\"mouseAnim" + mouseAnimationNumber + "\" style=\"position:absolute; left:" + (event.clientX) + "px; top:" + (event.clientY) + "px; border:1px; border-color:red; border-style:solid; z-index:1;\">";	 	 document.getElementById('mainBody').appendChild(newAnimation);	 newTimer = setInterval( function() {		  animationFrame++;		  document.getElementById('mouseAnim' + mouseAnimationNumber).src = "anim" + animationFrame + ".png";		  if(animationFrame >= 4) //my total animation		  {			   //my removeChild code here			   document.getElementById('mainBody').removeChild(document.getElementById('mainBody').lastChild);			   clearInterval(newTimer);		  }	 }, 100);}

This works for one animation only, but it fails when the user clicks a 2nd time (deleting only the last of the 2).Shouldn't it delete all of them since I've instantiated the objects with their own auto delete timers?Since it's not working this way I'm trying to make it delete the specific child by using parentNode.removeChild(parentNode.getElementById('whatIwantToBeDeleted')) but it doesn't work either :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...