移动浏览器上不会移除子节点

Question

我使用A-frame结合Angular制作虚拟指南，然后使用下一代码从a-entity标记中删除所有热点和导航箭头。

while (this.hotSpotEntity.hasChildNodes()) {
    this.hotSpotEntity.removeChild(this.hotSpotEntity.childNodes[0]);
}

while (this.navigationEntity.hasChildNodes()) {
    this.navigationEntity.removeChild(this.navigationEntity.childNodes[0]);
}

此代码将删除我定义为全局变量的a-entity标记中的所有元素。但是这段代码存在问题。

P.S。：无法使用数据绑定，因为A帧不支持它。

请参阅下面的第一个场景。箭头和放大镜是由我编写的代码添加的，是hotspotEntity和navigationEntity的子项。

我点击箭头，代码会导航到新场景。但你可以看到箭头和热点没有被删除。这是红色条纹图像。导航后添加绿色圆圈图像。

当您单击绿色圆圈箭头时，您将导航到下一个场景。在这里你可以看到第一个天空的图像没有被删除，但是第二个场景的图像被删除了。

该错误仅发生在移动浏览器（Google Chrome for Android，Samsung Internet）上，而不发生在桌面浏览器（Firefox，Edge）上。

任何人都可以为什么只在移动浏览器上发生此错误以及我如何解决它？

您可以在此链接上测试游览：http://student.howest.be/hein.pauwelyn-vand1/poppr/aframe/以及this GitHub Gist上的完整代码。

Answer 1

也许尝试一些不同的东西：

while (this.hotSpotEntity.firstChild) {
   this.hotSpotEntity.removeChild(this.hotSpotEntity.firstChild);
}

while (this.navigationEntity.firstChild) {
    this.navigationEntity.removeChild(this.navigationEntity.firstChild);
}

firstChild是一个只读属性，如果没有，则返回null。您可以在条件中使用它，因为当有孩子时它是真实的而当没有孩子时它是虚假的。

如果这适用于移动设备并修复了错误，那么我不知道为什么不幸。 如果这不能解决您的问题，请告诉我。我会删除答案。