Trying to write LAT LONG

What I’m trying to do

I have an on click event that places a marker on a map, what I want is if the user clicks again the the old marker is deleted and the new marker is deleted

Things I have tried

this did not work

here is e code I used , any idea how ai can make this work.

Getting coordinates from a Leaflet map
<link rel="stylesheet" href="[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

	html, body {
		height: 100%;
		margin: 0;

	.leaflet-container {
		height: 800px;
		width: 1200px;
		max-width: 100%;
		max-height: 100%;

		.leaflet-container.crosshair-cursor-enabled {
			cursor: crosshair;



	<label for="long">
		<input type="text" id="longx" />

<div id="map" style="width: 1000; height: 1000;"></div>

	const map ='map').setView([52.1579, -106.6702], 5);
	L.DomUtil.addClass(map._container, 'crosshair-cursor-enabled');

	const tiles = L.tileLayer('{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="">OpenStreetMap</a>'

	map.on('click', function (e) {
		var popLocation = e.latlng;
		var popup = L.popup()
			.setContent('<p>LAT:' + + ' <br/> LONG:' + e.latlng.lng + '</p>')
		L.marker([, e.latlng.lng]).addTo(map);
		document.getElementById("lat").innerHTML =;
		document.getElementById("long").innerHTML = e.latlng.lng;
        document.getElementById("p1").innerHTML = e.latlng.lng;