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

marker.clearLayer();
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="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<style>
	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;
		}
</style>

LAT

LONG

LAT:
	</label>
	<label for="long">
		<span>LONG:</span>
		<input type="text" id="longx" />

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

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

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

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