Mapbox.js: Clear a custom legend?

Question

I am using Mapbox.js with browserify. I want to create a module that creates a map if it does not already exist, but updates it if it does.

I have got almost all the way there, but I'm having problems with updating the custom legend. I only seem to be able to append to it, and can't clear it.

This is my code:

var analyseMap = {
  setUpMap: function(options) {
    var _this = this;
    L.mapbox.accessToken = 'mytoken';
    if (typeof this.map === 'undefined') {
        this.map = L.mapbox.map('map', 'mapbox.streets').setView([53.1, -2.2], 6);
        this.layerGroup = L.layerGroup().addTo(this.map);
    } else {
        this.layerGroup.clearLayers();
    }
    var geojson_url = "/api/1.0/myurlbasedonoptions";
    $.getJSON(geojson_url, function(boundaries) {
      var orgLayer = L.geoJson(boundariesWithData, { style: getStyle });
      _this.layerGroup.addLayer(orgLayer);
      _this.map.fitBounds(orgLayer.getBounds());
      var popup = new L.Popup({ autoPan: false });

      var legendHtml = _this.getLegendHTML(options);
      _this.map.legendControl.removeLegend();
      _this.map.legendControl.addLegend(legendHtml);

Then I call it from another module like this:

// on initialise and update
map.setUpMap(someOptions);

This works just great the first time I call it. However, on update, the map updates and the layers update nicely, but I end up with two legends.

How can I clear the existing legend before adding the new one?

The documentation suggests that I need to know the value of the legend HTML in order to remove it, which seems strange.

Answer 1

OK, I fixed it by doing this:

if (typeof _this.legendHtml !== 'undefined') {
    _this.map.legendControl.removeLegend(_this.legendHtml);
}
_this.legendHtml = _this.getLegendHTML(_this.quintiles, options);
_this.map.legendControl.addLegend(_this.legendHtml);

Would still be interested to see if anyone has a more elegant solution though!