title: How do I remove a Leaflet GeoJSON layer when a user clicks it?
body: <p>I've put together a test case that demonstrates what I'm attempting to do and the error that it causes: <a href="http://codepen.io/anon/pen/RWPyej?editors=001" rel="nofollow">http://codepen.io/anon/pen/RWPyej?editors=001</a></p>
  
  <p>To demonstrate, open the javascript console then click on one of the polygons. It will remove the geojson layer entirely (desired) but when you move your mouse outside of where the polygon you clicked used to be, you'll get a console error: <code>Uncaught TypeError: Cannot read property 'mouseEventToContainerPoint' of null</code></p>
  
  <pre class="lang-js prettyprint-override"><code>layer = L.geoJson(geojson, {
      onEachFeature: function(feature, layer) {
        layer.on({
          click: onClick
        });
      }
    }).addTo(map)
  
  function onClick(e) {
    map.removeLayer(layer);
  }
  </code></pre>
  
  <p>When a user clicks on a polygon, I'd like to replace the geojson layer with other geojson data. I can either do this by removing the layer from the map or clearing the layer and adding new data; it seems either route produces the same error.</p>
  
  <p>I assume this has to do with the listeners for each polygon remaining after I've removed the layer, so I've tried to use <code>clearAllEventListeners()</code> to no avail.</p>
  
  <p>How should I remove/replace the GeoJSON layer without getting this error?</p>