MapQuest, trying to save a marker, so that I can replace it later with a new location

Below I am posting the working code, and the not working code.

No error, this works without any issue.

function addMarkerToMap(map, markerX, markerY, markerPopupText, symbol) {
    L.marker([ markerX, markerY ], {
        icon : L.mapquest.icons.marker({
            primaryColor : '#F2407F',
            secondaryColor : '#FB5998',
            shadow : false,
            size : 'md',
            symbol : symbol
        }),
        draggable : false
    }).bindPopup(markerPopupText).addTo(map);

    boundsForZoomAllPoints.add(new MQA.Poi({
        lat : markerX,
        lng : markerY
    }));
}

But I want to save the marker in a map, so that I can remove it and replace it later.

function updateMap(openSourceMap, liveTrackingLocations, mapMetaData) {
        var mapMetaData = trackingMetaData.mapMetaData ;
        for (var i = 0; i < mapMetaData.length; i++) {
            var key = mapMetaData[i].rideIDNPK ;
            var newMarker, existingMarker ;
            if (liveTrackingLocations[key] != undefined && liveTrackingLocations[key] != null) {
                existingMarker = liveTrackingLocations[key] ; 
                openSourceMap.remove(existingMarker) ;
            }
            newMarker = addMarkerToMap(openSourceMap, mapMetaData[i].currentGpsX, mapMetaData[i].currentGpsY, mapMetaData[i].routeName, 'C') ;  
            liveTrackingLocations[key] = newMarker ; 
        }
    }

I return the marker from this method, but this causes errors.

function addMarkerToMap(map, markerX, markerY, markerPopupText, symbol) {
    var marker = L.marker([ markerX, markerY ], {
        icon : L.mapquest.icons.marker({
            primaryColor : '#F2407F',
            secondaryColor : '#FB5998',
            shadow : false,
            size : 'md',
            symbol : symbol
        }),
        draggable : false
    }).bindPopup(markerPopupText).addTo(map); <!-- Here the error occurs -->

    boundsForZoomAllPoints.add(new MQA.Poi({
        lat : markerX,
        lng : markerY
    }));
    return marker;
}

Error on Chrome console, below

Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at e._initIcon (mapquest.js:10)
    at e.onAdd (mapquest.js:10)
    at e._layerAdd (mapquest.js:10)
    at e.whenReady (mapquest.js:10)
    at e.addLayer (mapquest.js:10)
    at e.addTo (mapquest.js:10)
    at addMarkerToMap (mapQuestHelper.js:330)
    at updateMap (onLoadTrackingDashboardMapQuestView:1936)
    at HTMLDocument.<anonymous> (onLoadTrackingDashboardMapQuestView:4594)
    at j (jQuery-2.1.4.min.js:2)
_initIcon @ mapquest.js:10
onAdd @ mapquest.js:10
_layerAdd @ mapquest.js:10
whenReady @ mapquest.js:10
addLayer @ mapquest.js:10
addTo @ mapquest.js:10
addMarkerToMap @ mapQuestHelper.js:330
updateMap @ onLoadTrackingDashboardMapQuestView:1936
(anonymous) @ onLoadTrackingDashboardMapQuestView:4594
j @ jQuery-2.1.4.min.js:2
fireWith @ jQuery-2.1.4.min.js:2
ready @ jQuery-2.1.4.min.js:2
I @ jQuery-2.1.4.min.js:2
mapquest.js:10 TypeError: Cannot read property 'mapType' of undefined
    at e.value (mapquest.js:23)
    at e.value (mapquest.js:23)
    at mapquest.js:23
M @ mapquest.js:10
L @ mapquest.js:10
(anonymous) @ mapquest.js:23
Promise.catch (async)
value @ mapquest.js:23
value @ mapquest.js:23
addTo @ mapquest.js:10
addControl @ mapquest.js:10
s @ mapquest.js:10
e @ mapquest.js:10
l @ mapquest.js:10
initializeMapQuest @ mapQuestHelper.js:3
(anonymous) @ onLoadTrackingDashboardMapQuestView:1861

What am I missing ?

Solution

I found an answer here.

Extract from the above mentioned website (so as to not loose the validity of the answer)

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.1.0/mapquest.css"/>
        <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.1.0/mapquest.js"></script>
        <script type="text/javascript">
        var map, fg;

        function doit() {
         fg.removeLayer(fg.getLayers()[0]);
         L.marker([39.744979,-104.989506]).addTo(fg);
        }

        window.onload = function() {
            L.mapquest.key = KEY;
            fg = L.featureGroup();
            map = L.mapquest.map('map', {
                center: [39.750523,-104.999734],
                layers: [L.mapquest.tileLayer("map"), fg],
                zoom: 12
            });
            L.marker([39.750523,-104.999734]).addTo(fg);
        }
        </script>
    </head>

    <body style="border: 0; margin: 0;">
        <div id="map" style="width: 800px; height: 530px;"></div>
        <input type="submit" onclick="doit();" value="doit"/>
    </body>
</html>

But this did not work for me

    fg.removeLayer(fg.getLayers()[0]);

What worked was

    var layers = fg.getLayers() ;
    for (var i = 0 ; i < layers.length ; i++) {
        fg.removeLayer(layers[i]) ;
    }