Panning disabled when remove leaflet map from dom -vuejs

Question

I have a leaflet map in my vuejs app. I need to refresh my map when users update their search terms.

I notice that my code is not replacing the map. Instead, my code adds more divs to the existing map. This is problematic because it interferes with user panning and also overloads the page with unwanted data.

I have tried deleting the existing map in several ways...

My current approach is this...

 var container = L.DomUtil.get("leafletMapId");
  if (container != null) {
    while (container.firstChild) 
      container.removeChild(containerfirstChild);
    }
    container._leaflet_id = null;
  } else {
    console.log("container was null");
  }

  var myMap = L.map("leafletMapId", {
    layers: [streetTilesLayer],
    scrollWheelZoom: true
  }).setView(this.center, this.zoom);

This appears to effectively empty the map div. However, it leads to an error when I click and attempt to pan the map:

leaflet-src.js?e11e:2558 Uncaught TypeError: Cannot read property 'offsetWidth' of null at getSizedParentNode (leaflet-src.js?e11e:2558) at NewClass._onDown (leaflet-src.js?e11e:5902) at HTMLDivElement.handler (leaflet-src.js?e11e:2679)

I have also tried this...

 var container = L.DomUtil.get("leafletMapId");
  if (container != null) {
    container.innerHTML = "";
    container._leaflet_id = null;
  } else {
    console.log("container was null");
  }

  var myMap = L.map("leafletMapId", {
    layers: [streetTilesLayer],
    scrollWheelZoom: true
  }).setView(this.center, this.zoom);

This causes the same error.

Answer 1

This seems to completely replace the leaflet map with no errors...

  $("#leafletMapId").remove();
  var g = document.createElement("div");
  g.setAttribute("id", "leafletMapId");
  document.getElementById("main-div").appendChild(g);


  var myMap = L.map("leafletMapId", {
    layers: [streetTilesLayer],
    scrollWheelZoom: true
  }).setView(this.center, this.zoom);

where this the div with ID "leafletMapId" is a child of the div with ID "main-div".

Answer 2

I've been struggling with this problem for a day and the answer given by GNG was the only one that solved it for me. I had to combine his answer with another one I found, so I could reload my map with a different set of markers each time and still have panning controls. My final code is this.

$("#map").remove();
var g = document.createElement("div");
g.setAttribute("id", "map");
document.getElementById("main-div").appendChild(g);


document.getElementById('map').innerHTML = `<div id="map" class="map map-home" style="height: 300px; margin-top: 50px"></div>`;
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttribution = 'Attribution',
        osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
var map = L.map('map').setView([latitud, longitud], 15).addLayer(osmLayer);
L.marker([latitud, longitud])
        .addTo(map)
        .bindPopup("mensaje")
        .openPopup();

I post this not as an answer to the original question, but to further comment on the answer given by GNG.