Cannot understand when using parentNode!

Hi Luca,

I think that there's maybe 2 issues here. One is, what do we need to use .removeChild() properly? And when is .parentNode needed?

To use removeChild() properly, you need both the element that you want to remove and the parent of that element.

You can think of it like this:

parentElement.removeChild(childElementToRemove);

You need both the parent and the child of that parent that you would like removed. This will always be true no matter what situation you're in.

Sometimes you'll be able to accomplish this without needing .parentNode. Other times, you'll need .removeChild() in combination with .parentNode to get the job done.

Maybe a simple example will help.

Suppose we have the following html:

<p>This is a paragraph.<span> It contains a span</span></p>

and the goal is to remove that span element.

Suppose the following js code to start off with

var span = document.querySelector("span");
var p = document.querySelector("p");

I have references to both the span that I'm trying to remove as well as the parent of that span which is the paragraph element. I have access to both of these elements through those 2 variables.

I can remove the span with

p.removeChild(span);

In this case, I could do it without needing .parentNode because I already had the parent stored in the variable p

On the other hand, let's say we have the following code

var span = document.querySelector("span");

In this case, I only have a reference to the element I want to remove. I don't have a reference to the parent. I'm pretending that I don't know it's the paragraph.

This is where .parentNode is useful. It will get the parent for us so that we can properly use removeChild()

var parent = span.parentNode; // save a reference to the parent of the span in the variable parent
parent.removeChild(span); // use that parent to call removeChild and pass in the child span

.parentNode can be used in any situation where you don't already know what the parent is. Either you don't know what the parent is or you simply don't have a reference to it saved in a variable.

This is what the example in this video is showing with the code inside the event listener.

The teacher first gets the LI that should be removed usingevent.target

let li = event.target;

At this point, we can't remove that li with removeChild() because we don't have a reference to the parent of that li.

This is why the teacher uses .parentNode, because it will give us a reference to the parent of that li.

let ul = li.parentNode;

Now we have both things that we need in order to use removeChild() properly.

let li = event.target;
let ul = li.parentNode;
ul.removeChild(li);

Hi there, Luca! When removing a child element we have to "refer" to the parent node. And what I mean by that is we have to tell it specifically which parent this child belongs to. Imagine for a moment that we have code that looks a bit like this:

<div id="first-div">
   <p> This is the first div </p>
</div>

<div id="second-div">
  <p> This is the second div </p>
</div>

Now imagine that we want to remove the second paragraph by using remove child. We have to first select the element that contains that paragraph. In this case it's the div with the id "second-div". Then we use removeChild to remove the paragraph inside that div. The div is the "parent" because it contains the paragraph. The paragraph is the child because it is contained within the div.

When using removeChild you will always have to tell it which parent you're removing the child from. And this is what we mean by a "reference".

Hope this clarifies things!

These are very different things.

The parentNode is an element property that refers to the node that contains this one, also known as the "parent" node. Making a reference to this property does not (by itself) cause any changes in the document.

On the other hand, removeChild() is a method that will take an element out of the document as a permanent change.

You might use these together if you have variable representing an element you want to remove. You could use parentNode to refer to its parent, and then apply the removeChild method to that parent.

Does that help clear things up?

The removeChild method needs both the parent and the child.

When you use removeChild, you need a reference to both the parent and child elements, since you call it like this:

<parent>.removeChild(<child>);

So, if you start with only the element you want to remove (in this case the paragraph is the child), then you would use the parentNode property to get the reference to the parent. Then when you have both you can use the method.

Hi Steven,

not so clear sorry! So you mean that we do not have strictly use parentNode and removeChild together, right? At the beginning of the video Guil says that we want to remove a paragraph from the DOM and we need to call removeChild on the paragraph's parent but we do not have a reference to the parent. What does this mean? If our goal is simply to remove the paragraph, could not we use only removeChild? Sorry, but I think this step is a little difficult to understand!

Thanks again everyone!

So when do we have to use removeChild and when parentNode? Can you make an example? And what does it mean "reference"?

Thank you Jennifer!

Ok I understand what does it mean "reference" now.

But now I have a trouble. In which situations we do not have a reference so to have to use parentNode?

Thanks a lot Jennifer for your patience! Sorry but I'm a newbie and this part is a little bit difficult to understand! :-)

It's a little bit clear now but I still cannot understand when I have to use parentNode. For example which is the difference when in the third stage "Removing Nodes" we used only removeChild without using parentNode? Passing your example to code, in which situation I could know only the parent and not the element? If I know only the parent I should use parentNode and if I know even the element I could use removeChild? Is it right?