Tengo un mapa de folleto con una etiqueta de selección que, cuando se selecciona un país, el borde se dibuja a su alrededor. Sin embargo, parece que no puedo hacer que elimine el borde anterior cuando cambia la selección.

Aquí está mi código hasta ahora:

 //When country selected, show its border $("#countrySelector").change(function(){ //Verify the function is picking up the iso_a3 value in the console var selectedCountry = $('#countrySelector').val(); console.log("You have selected the country " + selectedCountry); //AJAX call to JSON data $.ajax({ url: "countryBorders.php", dataType: "json", type: "POST", success: function(result) { var data = result["data"]; //Create the polygon/border for the relevant country for(let i = 0; i < data.length; i++) { if(selectedCountry === result.data[i].properties.iso_a3) { var country = result.data[i]; var countryStyle = { color: "green", weight: 0.7 } let countryLayer; if(countryLayer) { map.removeLayer(countryLayer); } countryLayer = L.geoJSON(country, countryStyle).addTo(map); } } } }) })

¿Estoy haciendo algo mal hacia el final?

He visto otras preguntas similares, pero parece que no puedo aplicarlas exactamente a mi ejemplo.

Cualquier ayuda sería muy apreciada.