Remove control in Leaflet
<p>I have a control on a Leaflet map that creates another control on click. When on the second click, the second control should be removed. I'm using <code>map.removeControl(customControl)</code>, but I get an error </p>

<blockquote>
  <p>Uncaught TypeError: t.remove is not a function</p>
</blockquote>

<p>Any thoughts on what I'm missing here?</p>

<pre><code>var customControl = L.Control.extend({

    options: {
        position: 'topleft'
    },

    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom toggleContainer');
        return container;
    }
});

var menuControl = L.Control.extend({

    options: {
        position: 'topleft'
    },

    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom menuControl');
        container.onclick = function() {
            if (menuControlActive === true) {
                this.style.backgroundImage = 'url(./assets/close.jpg)'
                map.addControl(new customControl());
                menuControlActive = false
            } else {
                this.style.backgroundImage = 'url(./assets/open.jpg)'
                map.removeControl(customControl);
                menuControlActive = true
            }
        }
        return container;
    }
});
</code></pre>