Using RemoveChild and AppendChild in JavaScript

Question

I’m trying to teach myself JavaScript and making a little game. The game consists of where you use your arrow keys and move around a closed area on a html document with an image (lets call it main) that will move in the direction you want. The object randomly appears one time on the screen and when the main image is on top of it, the object disappears.

I’ve been using apendChild to make the image appears randomly with Math.Random. The object moves, but what is missing is how to get rid of the image after moving on top of the image. How would you do this? Another Remove Child, or something else?

The code is over 150 lines. This is a snap of where I have put the appendChild and the removeChild, but not sure if this is the right way. I have also called up a location called toPlay() that will set the Interval and docReady.

var imgC = document.createElement("img");
imgC.src = “image.jpg”;
imgC.id = "food";


   function man() {    

     var food1 = document.getElementById("food");
     var man1 = document.getElementById("man");
     var blue = Math.floor(Math.random()*3);

     if(blue === 0) {
       var box1 = document.getElementById("box").appendChild(imgC);

       var manTop = (Math.floor(Math.random() * 20) *25);
       var manLeft = (Math.floor(Math.random() * 20) * 25);   

       food.style.position = 'absolute';
       food.style.top = manTop + "px";
       food.style.left = manLeft + "px";
     }
       else {
       var box = document.removeChild(box1); 
     } 
   }

   function toPlay() { 
     setInterval(man, 5000);
   }

   function docReady() {
     window.addEventListener('keydown', moveSelection); 
   }
   toPlay();

did you take a look at what the developers console is telling you, maybe you have an error somewhere? wickedlysmart.com/hfjsconsole — bobkingof12vs
– bobkingof12vs, Commented Mar 15, 2016 at 22:22
One proposal is to use ChildNode.remove() instead of removeChild() — Endless
– Endless, Commented Mar 15, 2016 at 22:54

pishpish · Accepted Answer · 2016-03-15 22:25:29Z

1

You should remove the child from the parent element:

document.getElementById("box").removeChild(imgC);

answered Mar 15, 2016 at 22:25

pishpish

2,62418 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RobG Over a year ago

If the OP already has a reference to imgC, then imgC.parentNode.removeChild(imgC) will do. ;-)

bobkingof12vs · Accepted Answer · 2016-03-15 22:33:05Z

1

box1 falls out of scope once the function has finished executing.

So when you call var box = document.removeChild(box1); it won't find an element called box1

var imgC = document.createElement("img");
imgC.src = “image.jpg”;
imgC.id = "food";

var box1;// <-- this grants global scoping, which is bad, but solves you problem ;)
function man() {

    var food1 = document.getElementById("food");
    var man1 = document.getElementById("man");
    var blue = Math.floor(Math.random()*3);

    if(blue === 0) {
        //removing var from here removes the local scope and allows box1 to persist.
        box1 = document.getElementById("box").appendChild(imgC);

        var manTop = (Math.floor(Math.random() * 20) *25);
        var manLeft = (Math.floor(Math.random() * 20) * 25);


        food1.style.position = 'absolute';
        food1.style.top = manTop + "px";
        food1.style.left = manLeft + "px";
    }
    else {
        //you can then call it like this
        document.getElementById("box").removeChild(box1);
        //or imgC.parentNode.removeChild(imgC) like RobG points out
    }
}

function toPlay() {
    setInterval(man, 5000);
}

function docReady() {
    window.addEventListener('keydown', moveSelection);
}
toPlay();

answered Mar 15, 2016 at 22:33

bobkingof12vs

6805 silver badges23 bronze badges

1 Comment

RobG Over a year ago

"box1 falls out of scope once the function has finished executing" but it's only used within the context of man. Also, it's the same element as the global imgC.

RobG · Accepted Answer · 2016-03-15 22:39:58Z

In your code:

var imgC = document.createElement("img");
imgC.src = “image.jpg”;
imgC.id = "food";

   function man() {    

   var food1 = document.getElementById("food");

That seem superfluous since you already have a reference to that element as imgC. And if imgC hasn't been added to the document, food1 will be null.

   if(blue === 0) {
     var box1 = document.getElementById("box").appendChild(imgC);

this creates yet another reference to imgC as box1.

...
     else {
         var box = document.removeChild(box1);

box1 (aka imgC) is attached to the node with id "box", not the document, removeChild only works on immediate children of a node, not any descendant. To remove a node generally, you can use:

  imgC.parentNode.removeChild(imgC);

or in this specific case, since imgC is a child of the node with id "box":

document.getElementById("box").removeChild(imgC);

Collectives™ on Stack Overflow

Using RemoveChild and AppendChild in JavaScript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related