Leaflet delete element from sidebar

I have an application that saves center coordination of Leaflet map with save button to sidebar.

I want to click any coordinate and delete with a keyboard button in the sidebar. Code snippet that controls the sidebar:

function createSidebarElements(layer) {
  const el = `<div class="sidebar-el" data-marker="${layer._leaflet_id}">${layer
    .getLatLng()
    .toString()}</div>`;

  const temp = document.createElement("div");
  temp.innerHTML = el.trim();
  const htmlEl = temp.firstChild;

  L.DomEvent.on(htmlEl, "dblclick", zoomToMarker);

  sidebar.insertAdjacentElement("beforeend", htmlEl);
}

function zoomToMarker(e) {
  const clickedEl = e.target;
  const markerId = clickedEl.getAttribute("data-marker");
  const marker = fg.getLayer(markerId);
  const getLatLong = marker.getLatLng();
  marker.addTo(map);

  marker.bindPopup(getLatLong.toString()).openPopup();
  map.panTo(getLatLong);
}

Full script.js:

let config = {
  minZoom: 7,
  maxZoom: 18,
};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 0;
const lng = 0;

const map = L.map("map", config).setView([lat, lng], zoom);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

map
  .locate({
    setView: true,
    enableHighAccuracy: true,
  })
  .on("locationfound", (e) => {
    console.log(e);
    // marker
    const marker = L.marker([e.latitude, e.longitude]).bindPopup(
      "Your are here :)"
    );
  })
  // if error show alert
  .on("locationerror", (e) => {
    console.log(e);
    alert("Location access denied.");
  });

// --------------------------------------------------

const sidebar = document.getElementById("sidebar");

function createSidebarElements(layer) {
  const el = `<div class="sidebar-el" data-marker="${layer._leaflet_id}">${layer
    .getLatLng()
    .toString()}</div>`;

  const temp = document.createElement("div");
  temp.innerHTML = el.trim();
  const htmlEl = temp.firstChild;

  L.DomEvent.on(htmlEl, "dblclick", zoomToMarker);

  sidebar.insertAdjacentElement("beforeend", htmlEl);
}

function zoomToMarker(e) {
  const clickedEl = e.target;
  const markerId = clickedEl.getAttribute("data-marker");
  const marker = fg.getLayer(markerId);
  const getLatLong = marker.getLatLng();
  marker.addTo(map);

  marker.bindPopup(getLatLong.toString()).openPopup();
  map.panTo(getLatLong);
}

const fg = L.featureGroup().addTo(map);

document.addEventListener("DOMContentLoaded", function () {
  updateInfo();
});

const markerPlace = document.querySelector(".center-of-map-description");

function updateInfo() {
  const { lat, lng } = map.getCenter();
  const zoom = map.getZoom();
  markerPlace.innerHTML = `center: ${lat.toFixed(5)}, ${lng.toFixed(
    5
  )} | zoom: ${zoom}`;
}

const customControl = L.Control.extend({
  // button position
  options: {
    position: "topright",
  },

  // method
  onAdd: function (map) {
    const btn = L.DomUtil.create("button");
    btn.title = "Save location";
    btn.textContent = "Save";
    btn.className = "SaveButton";
    btn.setAttribute(
      "style",
      "background-color: white; width: 33px; height: 20px; border: none; display: flex; cursor: pointer; justify-content: center; font-size: 1rem;"
    );

  
    btn.onmouseover = function () {
      this.style.transform = "scale(1.3)";
    };

    
    btn.onmouseout = function () {
      this.style.transform = "scale(1)";
    };

    btn.onclick = function (){

      const marker = L.marker(map.getCenter()).addTo(fg);
      marker.remove();
      createSidebarElements(marker);
    };

    return btn;
  },
});
map.addControl(new customControl());

style.css:

*,
:after,
:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
}

body,
html,
#map {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
}

.mapid {
    min-height: 100%;
}

.flex {
    display: flex;
    flex-direction: row;
}

.mapid #map {
    width: calc(100% - 20%);
}

#sidebar {
    width: 20%;
    background: #fff;
}

.sidebar-el {
    padding: 5px 10px;
    background: #fff;
    cursor: pointer;
}

.sidebar-el:hover {
    background: #f1f1f1;
}

.center-of-map:before {
    position: absolute;
    content: "\271B";
    z-index: 990;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 4rem;
}

.center-of-map-description {
    background: #fff;
    margin: 0 !important;
    padding: 2px 10px;
}

index.html:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sidebar</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</head>

<body>
<div class="flex mapid">
    <div id="map" class="center-of-map"></div>
    <div id="sidebar"></div>
</div>
<script src="script.js"></script>
</body>
</html>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW