leaflet: removeLayer() work only once in JavaScript

Question

this is the my Map ,my removeLayer in leaflet map remove once (remove Picture ) and as you see in picture it remove marker perfectly but when i try to remove it again it don't! check is not true but it didnt remove for 2nd time. here is the function that called from checkbox :

 function myFunction(id) {
    var marker = [];
    var checkBox = document.getElementById(id)
    var lat = checkBox.name;
    var lon = checkBox.value;
    var RN = checkBox.className;
    console.log(RN)
    
    var pop_cont = `<img id="icon" src="sample.jpg" alt="shipPIC"/><br><b>${RN}</b><br> latitude :${lat}<br>longitude: ${lon}`
    if (checkBox.checked == true) {
        marker = L.marker([lat, lon]).addTo(map);
        marker.setIcon(dish_icon);
        marker.bindPopup(pop_cont).openPopup();
        console.log("checked")

    } else {
        marker = L.marker([lat, lon])
        var x_id = L.stamp(markers);
        map.removeLayer(markers[id]);
        console.log("NOOOOT Check");

        
       
    }
}

thank you very much!

Answer 1

You check if the checkbox checked. It means that you have programmaticly check and uncheck the checkbox. Like that. I commented out the leaflet part.

function myFunction(id) {
  console.log(id)
    var marker = [];
    var checkBox = document.getElementById(id)
    var lat = checkBox.name;
    var lon = checkBox.value;
    var RN = checkBox.className;
    console.log(RN)
    
    var pop_cont = `<img id="icon" src="sample.jpg" alt="shipPIC"/><br><b>${RN}</b><br> latitude :${lat}<br>longitude: ${lon}`
    if (checkBox.checked == true) {
        //marker = L.marker([lat, lon]).addTo(map);
        //marker.setIcon(dish_icon);
        //marker.bindPopup(pop_cont).openPopup();
        console.log("checked")
        checkBox.checked = false;
    } else {
        //marker = L.marker([lat, lon])
        //var x_id = L.stamp(markers);
        //map.removeLayer(markers[id]);
        console.log("NOOOOT Check");               
        checkBox.checked = true;
    }
}

<button onclick="myFunction('vehicle1')">klick</button>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">