Error when removing some ESRI basemaps from the basemapGallery

Question

I am using the ArcGIS JS API 3.16 and I am attempting to remove some of the ESRI basemaps from the basemapGallery. Some of the items are being removed, but I am encountering an issue with the last item not being removed (when the index gets to 10). The error is "esri.dijit.BasemapGallery: could not find group for basemaps.". Any ideas? The code is attached/below. Thanks...Chris <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Basemap gallerytitle> <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } style> <script src="https://js.arcgis.com/3.18/">script> <script> var map; require([ "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", "dojo/domReady!" ], function( Map, BasemapGallery, arcgisUtils, parser ) { parser.parse(); map = new Map("map", { basemap: "topo", center: [-105.255, 40.022], zoom: 13 }); //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps var basemapGallery = new BasemapGallery({ showArcGISBasemaps: true, map: map }, "basemapGallery"); basemapGallery.startup(); basemapGallery.on("error", function(msg) { console.log("basemap gallery error: ", msg); }); basemapGallery.on("load", function() { var tot = basemapGallery.basemaps.length; for (var cnt = 0; cnt < tot; cnt++) { if (basemapGallery.basemaps[cnt].title === "Oceans" || basemapGallery.basemaps[cnt].title === "OpenStreetMap" || basemapGallery.basemaps[cnt].title === "USGS National Map" || basemapGallery.basemaps[cnt].title === "USA Topo Maps") { console.log("Removing..." + basemapGallery.basemaps[cnt].title); basemapGallery.remove(basemapGallery.basemaps[cnt].id); } } }); }); script> head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;"> <div style="position:absolute; right:20px; top:10px; z-Index:999;"> <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false"> <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;"> <div id="basemapGallery">div> div> div> div> div> div> body> html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Accepted Answer

Chris, When removing items from the array you are looping through you always need to loop through the array in reverse: basemapGallery.on("load", function() { var tot = basemapGallery.basemaps.length; for (var cnt = tot - 1; cnt >= 0; cnt--) { if (basemapGallery.basemaps[cnt].title === "Oceans" || basemapGallery.basemaps[cnt].title === "OpenStreetMap" || basemapGallery.basemaps[cnt].title === "USGS National Map" || basemapGallery.basemaps[cnt].title === "USA Topo Maps") { console.log("Removing..." + basemapGallery.basemaps[cnt].title); basemapGallery.remove(basemapGallery.basemaps[cnt].id); } } });‍‍‍‍‍‍‍‍‍‍