removeChild（lastChild）不工作？

Question

我接受了一些关于访问和操作DOM的教程，我遇到了这个：

我有这个HTML：

<span>
    Shooting
    <img id="fallenstar" src="https://dom-tutorials.appspot.com/static/star_on.gif">
</span>

我想删除这位明星，我想出了这个解决方案：

document.getElementById("fallenstar").parentNode.removeChild(lastChild);

但是当它起作用时它不起作用：

var star = document.getElementById('fallenstar');
star.parentNode.removeChild(star);

我的问题是它们之间有什么区别。当我将document.getElementById("fallenstar")分配给变量时，为什么会这样？

Answer 1

变量lastChild未在任何地方定义。因此，它不能用作removeChild函数的参数。

Answer 2

您必须声明lastChild。我假设是星形图像：

var lastChild = document.getElementById('fallenstar');
lastChild.parentNode.removeChild(lastChild);

fiddle

Answer 3

鉴于标记：

<span>
    Shooting
    <img id="fallenstar" src="https://dom-tutorials.appspot.com/static/star_on.gif">
</span>

span元素的最后一个子节点是文本节点，而不是img元素。在所有浏览器中可靠地删除图像的方法是直接引用它：

var node = document.getElementById('fallenstar');
node.parentNode.removeChild(node);