Javascript：无法在“Node”上执行“removeChild”：参数 1 不是“Node”类型

我正在尝试从其中一门课程中重新创建一些实践。它即将从 UL 中删除一个 li-item 并将其附加到另一个 UL 中。

当我按照以下方式编写代码时，一切正常

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;
}

当我将代码更改为以下内容时，出现错误“无法在“Node”上执行“removeChild”：参数 1 不是“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);
}

令我困扰的是，当我的removeMeandAppendMe函数不带参数并且不使用参数时，代码运行良好。谁能告诉我为什么以及我的错误在哪里？谢谢。

（我知道这里讨论的模糊问题：无法在“节点”上执行“removeChild”)

首先，正如 Pointy 提到的，您确实需要将调用包装到RemoveMeandAppendMe(incompleList, compleList)在匿名函数中，这样就不会过早调用它。

考虑到这一点，您收到此错误的原因是this是每个函数调用的情况。打电话时RemoveMeandAppendMe(), this是一个 HTMLInputElement 对象，但是当调用时RemoveMeandAppendMe(incompleList, compleList), this是 Window 对象，所以this.parentNode is undefined（因此“不是'Node'类型”，这就是您看到该错误消息的原因）。

这个问题有很多微妙之处：什么this指的是，以及如何处理不同的“函数”声明（很多讨论here）。只是换个方式RemoveMeandAppendMe(incompleList, compleList)声明也不能解决问题。

在某种程度上，你的问题可以归结为“为什么this参数化函数调用引用 Window 对象，但非参数化函数调用引用 HTMLInputElement 对象？”我相信在这种情况下，这是因为，当我们将参数化函数调用的调用包装在匿名函数中时（像这样：liCheck.onchange = function(){removeMeandAppendMe(incompleList, compleList);};), removeMeandAppendMe没有“本地”所有者，因此该函数的所有权默认为全局对象 Window (参考).

要解决此问题，您可以传入this到调用removeMeandAppendMe, where this将引用该复选框，然后将其用作该参数化函数中的变量。我已将所有这些放入你的fiddle可以通过注释/取消注释不同的事物来进行操作。希望这有帮助。