package.json

{
  "name": "ewalswebvr",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "aframe": "^0.5.0",
    "aframe-template-component": "^3.2.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.28.3",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

question.md

I make a virtual guide using A-frame in combination with Angular and use next code to remove all hot spots and navigation arrows from the a-entity tag.

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

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

This code will remove all elements from the a-entity tags I've defined as global variables. But there is an issue with this code.

P.S.: Can't use databinding because A-frame doesn't support it 😕.

See this first scene below. The arrows and magnifiers are added by the code I've written and are children of the hotspotEntity and navigationEntity.

I've I click on a arrow, the code navigates you to a new scene. But you could see that the arrows and hotspots aren't removed. This are the red striped images. The green circled image is added after navigating.

When you click on the green circled arrow, you're navigating to the next scene. Here you could see that the images from the first sky aren't removed but the images of the second scene are removed.

The bug happens only on mobile browsers (Google Chrome for Android, Samsung Internet) and not on desktop browsers (Firefox, Edge).

Could anyone why this bug occurs only on mobile browsers and how I could solve it?

You could test the tour on this link: http://student.howest.be/hein.pauwelyn-vand1/poppr/aframe/ and full code on this GitHub Gist.

vrtour.component.html

<a-scene inspector="url: https://aframe.io/releases/0.3.0/aframe-inspector.min.js">
    <a-assets>
        <img id="sky" [src]="currentImageSource" alt="" />
        <img id="details" src="assets/images/details.png" alt="" />
        <img id="arrow" src="assets/images/arrow.png" alt="" />
    </a-assets>

    <a-entity id="hotspots">
        <!--<a-image *ngFor="let spot of currentData.hotspots; let i = index" debug [id]="spot.id" [position]="spot.location" [rotation]="spot.rotation"
            [scale]="spot.scale" src="#details" (click)="showDetails(spot.id)">
        </a-image>-->
    </a-entity>

    <a-entity id="navigation">
        <!--<a-image *ngFor="let scene of currentData.nextScenes; let i = index" debug [id]="scene.id" [position]="scene.location" [rotation]="scene.rotation"
            [scale]="scene.scale" look-controls src="#arrow" (click)="load(scene.to)">
            <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
        </a-image>-->
    </a-entity>

    <a-camera look-controls wasd-controls cursor="maxDistance: 30; fuse: true">
        <a-entity position="0 0 -3" geometry="primitive: ring; radiusOuter: 0.07;radiusInner: 0.05;" material="color: cyan; shader: flat"
            cursor="maxDistance: 30; fuse: true">
            <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
            <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-entity>
    </a-camera>

    <a-sky src="#sky"></a-sky>
</a-scene>

vrtour.module.ts

import { Component, AfterViewInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
    selector: 'app-vrtour',
    templateUrl: './vrtour.component.html',
    styleUrls: ['./vrtour.component.scss']
})
export class VrtourComponent implements AfterViewInit {

    data: any[] = require("assets/json/data.json");
    currentData: any;
    id: number;
    currentImageSource: string = "";

    private hotSpotEntity: Element;
    private navigationEntity: Element;
    private sky: Element;

    init(): void {
        this.sky = document.querySelector("a-sky");
        this.hotSpotEntity = document.getElementById("hotspots");
        this.navigationEntity = document.getElementById("navigation");
    }

    load(id: number): void {

        console.log(`loading scene number ${id}`);

        if (id <= this.data.length) {

            this.id = id;
            this.currentData = this.data[id - 1];
            this.currentImageSource = `assets/360images/${this.currentData.image}`;

            this.sky.setAttribute("src", this.currentImageSource);
            this.loadEntities();
        }
    }

    showDetails(spotId: number): void {
        alert(spotId);
    }

    ngAfterViewInit(): void {
        this.init();
        this.load(1);
        this.loadEntities();
    }

    loadEntities(): void {

        while (this.hotSpotEntity.firstChild) {
            this.hotSpotEntity.children[0].remove();
        }
        while (this.navigationEntity.firstChild) {
            this.hotSpotEntity.children.item(0).remove();
        }

        for (let i: number = this.currentData.hotspots.length; i--;) {

            let spot: any = this.currentData.hotspots[i];
            let el: Element = document.createElement("a-image");

            el.setAttribute("position", spot.location);
            el.setAttribute("rotation", spot.rotation);
            el.setAttribute("scale", spot.scale);

            el.setAttribute("src", "assets/images/details.png");

            this.hotSpotEntity.appendChild(el);
            //document.getElementById("hotspots").appendChild(el);
        }

        for (let i: number = this.currentData.nextScenes.length; i--;) {

            let scene: any = this.currentData.nextScenes[i];
            let el: any = document.createElement("a-image");

            el.setAttribute("position", scene.location);
            el.setAttribute("rotation", scene.rotation);
            el.setAttribute("scale", scene.scale);

            el.setAttribute("src", "assets/images/arrow.png");
            el.addEventListener("click", () => {
                console.log(`click to ${scene.to}`);
                this.load(scene.to);
            });

            this.navigationEntity.appendChild(el);
        }
    }
}