title: Destroy leaflet map trouble
body: <p>I use several leaflet maps at one time. They can be created and deleted dynamically. But when a map is destroyed by using the map.remove() there is a memory leak. Detached DOM trees appears. You can see it in Chrome Dev Tools.</p>
  
  <p><a href="http://www.vladoblgaz.ru/patyi/screen.png" rel="noreferrer">Screenshot with a leak.</a></p>
  
  <p>Example function I use to recreate div and map:</p>
  
  <pre><code>var map, mapDiv;
  recreateMap = function(){
      // destroy previous map and div
      if(map) map.remove();
      if(mapDiv) mapDiv.parentNode.removeChild(mapDiv);
      // create new map div
      var randomDivId = 'mapId' + new Date().getTime();
      mapDiv = document.createElement('div');
      mapDiv.id = randomDivId;
      mapDiv.style.height = '200px';
      mapDiv.style.width = '200px';
      document.getElementsByTagName('body')[0].appendChild(mapDiv);
      // attach map to div
      map = L.map(randomDivId).setView([51.505, -0.09], 13);  
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
      map.invalidateSize();
  };
  </code></pre>
  
  <p><a href="http://www.vladoblgaz.ru/patyi/index.html" rel="noreferrer">Working example here.</a></p>
  
  <p>How to properly destroy the leaflet maps?</p>