title: Remove control in Leaflet
body: <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>