confuse about the parentNode

Question

I get confused about the parentNode in JS.Here is my code.

<table border="1" width="50%" id="table"> <tr> <th>id</th> <th>name</th> <th>del</th> </tr> <tr> <td>001</td> <td>Kevin</td> <td><a href="javascript:;" onclick="del(this);">del</a></td> </tr>

and the JS code:

function del(obj){ var tr = obj.parentNode.parentNode; tr.parentNode.removeChild(tr) }

the code works and I think the obj refers to the <a> tag, the obj.parentNode refers to the <td>tag, the obj.parentNode.parentNode refers to the <tbody>tag. so the tr.parentNode.removeChild(tr) means to remove the <tr>tag. Am I right?

the question is that if I change the code like this. It does not work.

function del(obj){ var tr = obj.parentNode.parentNode.parentNode; tr.removeChild(tr) }

A node (tr) cannot be the a child of itself (tr) (unless time travel). — Felix Kling
– Felix Kling, Commented Apr 28, 2016 at 16:48

dfsq · Accepted Answer · 2016-04-28 16:41:03Z

1

The reason why

tr.removeChild(tr)

doesn't work is because tr is not a child of tr, i.e. itself. However, tr.parentNode.removeChild(tr) works because tr is obviously a child of tr.parentNode.

answered Apr 28, 2016 at 16:41

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

kevin su Over a year ago

thanks there! can I ask another question? if I want to use del() instead of del(this) (not very clear know about the "this",I am a beginner) how can I change the function()?

dfsq Over a year ago

If you don't pass this inside del like del(this) then inside of it you will have to find clicked TD somehow, not very convenient if TD doesn't have any class or id, etc, something to identify it with document.querySelector method for example. You could however use this onclick="del.call(this)" and inside of the function this will point to what obj is not.

Cameron637 · Accepted Answer · 2016-04-28 16:43:19Z

removeChild will look for a node within the node calling the function. In other words tr.removeChild is looking for tr inside of tr. Try this instead:

var tr = obj.parentNode.parentNode; var trParent = tr.parentNode; trParent.removeChild(tr);

Community · Accepted Answer · 2017-05-23 12:23:55Z

I had to deal with the same issue, and the answer is confusing and counter intuitive. Well, it has its logic, but leads to non-trivial behaviours.

Essentially, when a node is removed from the DOM tree, it fires a blur event (and before a focusout event too).

So, when you call removeChild, the blur event is fired again, but this time link still has its parentNode defined, but link isn't among its parent's children anymore! (Yes, read this twice. Or more.)

Answer from Failed to execute 'removeChild' on 'Node'

That seems unrelated to the problem presented here. Also, simply copying an answer is not really tolerated here.

Collectives™ on Stack Overflow

confuse about the parentNode

3 Answers 3

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Linked

Related