Leaflet dynamic layer control

<!DOCTYPE html>
<html>
	<head>

<title>Layers Control Tutorial - Leaflet</title>

</head>
	<body>

<button onclick='addLayer()' >Add</button>
		<button onclick='removeLayer()'>Remove</button>
		<div id='map'></div>

map.addLayer(cities);

// remove the current control panel
				map.removeControl(baseControl);
				// add one with the cities
				citiesControl = L.control.layers(baseLayers, overlays).addTo(map);
			}
			function removeLayer() {
				console.log("Removing layer");
				map.removeLayer(cities);

// now put the control back
				map.removeControl(citiesControl);
				baseControl.addTo(map);
			}

var mbAttr = 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, ' +
					'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
					'Imagery © <a href="https://mapbox.com">Mapbox</a>',
				mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
				streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});

var map = L.map('map', {
				center: [39.73, -104.99],
				zoom: 10,
				layers: [grayscale]
			});

var baseLayers = {
				"Grayscale": grayscale,
				"Streets": streets
			};

var baseControl = L.control.layers(baseLayers).addTo(map);
			// make a global control variable for the control with the cities layer...
			var citiesControl;
		</script>
	</body>
</html>

https://unpkg.com/leaflet@1.3.1/dist/leaflet.js