Remove control in Leaflet

Question

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 map.removeControl(customControl), but I get an error

Uncaught TypeError: t.remove is not a function

Any thoughts on what I'm missing here?

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;
    }
});

Answer 1

figured it out on my own eventually:

function createControl() {
customControl = L.control({position: 'topleft'});

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

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)'
                createControl()
                menuControlActive = false
            } else {
                this.style.backgroundImage = 'url(./assets/open.jpg)'
                map.removeControl(customControl);
                menuControlActive = true
            }
        }
        return container;
    }
});