Javascript: Failed to execute 'removeChild' in 'Node': parameter 1 is not of type 'Node'

Question

I am trying to recreate some practices from one of the courses. He is going to remove the li element from UL and add it to another UL.

When I write my code as follows everything works finde

var removeMeandAppendMe = function() { var parentLi = this.parentNode; var goneElement = incompleList.removeChild(parentLi); compleList.appendChild(goneElement); }; var li = incompleList.getElementsByTagName('li'); for (var i = 0; i < incompleList.children.length; i++) { var link = li[i]; var liCheckArray = link.getElementsByTagName('input'); var liCheck = liCheckArray[0]; liCheck.onchange = removeMeandAppendMe; } 

When I change my code to the following, I get the error message "Failed to execute" removeChild "to" Node ": parameter 1 is not of type" Node ".

 function removeMeandAppendMe(fromList, toList) { var parentLi = this.parentNode; var goneElement = fromList.removeChild(parentLi); toList.appendChild(goneElement); } var li = incompleList.getElementsByTagName('li'); for (var i = 0; i < incompleList.children.length; i++) { var link = li[i]; var liCheckArray = link.getElementsByTagName('input'); var liCheck = liCheckArray[0]; liCheck.onchange = removeMeandAppendMe(incompleList, compleList); } 

What bothers me is that the code works well when my removeMeandAppendMe function has no parameters and does not work with parameters. Can someone tell me why and where is my mistake? Thanks.

(I know about the blur problem discussed here: Failed to execute 'removeChild' in 'Node' )

Answer 1

First, as Walkley mentioned, you need to wrap your call to RemoveMeandAppendMe(incompleList, compleList) an anonymous function so that it is not called prematurely.

Given this, you get this error because the this value applies to every function call. When you call RemoveMeandAppendMe() , this is an HTMLInputElement object, but when you call RemoveMeandAppendMe(incompleList, compleList) , this is a Window object, and therefore this.parentNode is undefined (and therefore "not of type" Node ", so you see this error message).

There are many subtleties in this question: what this refers to, as well as how various function declarations are processed (there are a lot of discussions here ). Just changing the method of declaring RemoveMeandAppendMe(incompleList, compleList) does not RemoveMeandAppendMe(incompleList, compleList) problem.

In a sense, your question boils down to "Why this refer to a Window object for a parameterized function call, but an HTMLInputElement object for a non-parameterized function call?" I believe that in this case this is due to the fact that when we end the call to a parameterized function call in an anonymous function (for example: liCheck.onchange = function(){removeMeandAppendMe(incompleList, compleList);}; ), removeMeandAppendMe does not have a local owner , so ownership of this function defaults to the global object, Window ( link ).

To fix this, you can go into this to call removeMeandAppendMe , where this will refer to this flag, and then use it as a variable inside this parameterized function. I put all this in your fiddle where you can play by commenting / uncommenting different things. Hope this helps.