要添加document.body.appendChild，但要删除parentNode.removeChild？

Question

I've decided it's time for me to learn javascript in a more formal and less haphazard way than I've used it in the past.

So I went to developer.mozilla.org to take their tutorial.

One of the first teaching exercises they provide is in the article entitled,"A First splash into JavaScript" at https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash , in which they create a simple number guessing game.

In that game's code, the exercise creates a function called setGameOver which creates a button labeled, "Start New Game".

The code for that button is:

document.body.appendChild(resetButton);

This is followed by another function called resetGame, in which this button is removed from the page:

resetButton.parentNode.removeChild(resetButton);

My question is: if the code to add the button is document.body.appendChild, why isn't the code to remove the button something like document.body.removeChild?

And why do we have to use parentNode.removeChild instead?

This is the kind of thing with coding tutorials that drives me nuts. They introduce a new command and they don't explain why. They just say in effect, "This is how you remove the button" and they leave it at that. Ugh!

Answer 1

There's a lot of ways to remove and add an element to the page, this just happens to be the way that the tutorial author chose to demonstrate that. Perhaps their intention was to demonstrate that you can in fact access document.body through resetButton.parentNode , we will never know.

The main point here is that you can remove the button by accessing it's parent node. In this case, we know for a fact that document.body is its parent node (we added the button to that element, so it must be the parent), so in this case resetButton.parentNode and document.body refer to the same object, and are functionally equivalent.

var node1 = document.body;
node1.appendChild(resetButton);
// resetButton is now a child of node1 (and document.body, its the same object)
var node2 = resetButton.parentNode;
// we now know that node2 == node1 so we could do either of the following:
node1.removeChild(resetButton);
// -- or --
node2.removeChild(resetButton);

If you have the reference to a specific html node (in this case, resetButton ) and don't know what the parent node is, then using .parentNode to find the parent would be the right way to do it. If you do know the parent (because you just added it) then it doesn't really matter which way you do it.