Removing added layers using Leaflet

Question

I add polygon data on the Leaflet map by selecting parameters: travel_mode and travel_time from the form control and clicking a button "btnGenerate". This button click function is working as expected: it adds as many polygons as it is clicked. Say I click the button 3 times, with 3 different parameters of travel_mode and travel_time, it adds 3 different polygons on the map. Now when I click another button which invokes the function "removeTraveltime", it only removes the last added polygons. First 2 polygons are still on the map. My aim is to remove all 3 added polygons from the map with one click of the remove button. I am not sure how to implement that. My code is as below:

var ttPoly;
$("#btnGenerate").click(function(){
    $.ajax({
            url: 'php/traveltime.php',
            type: 'POST',
            data:{eno:enos,
                  travel_mode: $("#travelmode").val(),
                  travel_time: $("#traveltime").val()                            
            },
            success: callbackTT
    });
    
        function callbackTT(response){                
                ttPoly = L.geoJSON(JSON.parse(response), {forEach:function(ttPoly){
                         var poly =L.polygon(ttPoly.geometry.coordinates);
                }}); 
        
                ttPoly.setStyle({
                    color:'purple',
                    fillOpacity:0.4
                });
                $("#dlgTravelTime").hide();
                ttPoly.addTo(mymap);   
        };               
});
    
function removeTraveltime(enos){
        if(ttPoly){
             mymap.removeLayer(ttPoly);                        
        } 
}

Answer 1

I managed to do it this way. Posting here as an alternative.

var ttPoly;
var ttLayerGroup = new L.LayerGroup();
$("#btnGenerate").click(function(){
    $.ajax({
            url: 'php/traveltime.php',
            type: 'POST',
            data:{eno:enos,
                  travel_mode: $("#travelmode").val(),
                  travel_time: $("#traveltime").val()                            
            },
            success: callbackTT
    });
    
        function callbackTT(response){                
                ttPoly = L.geoJSON(JSON.parse(response), {forEach:function(ttPoly){
                         var poly =L.polygon(ttPoly.geometry.coordinates);
                }}); 
        
                ttPoly.setStyle({
                    color:'purple',
                    fillOpacity:0.4
                });
                $("#dlgTravelTime").hide();
                ttLayerGroup.addLayer(ttPoly);
                ttLayerGroup.addTo(mymap); 
            
        };               
});
    
function removeTraveltime(enos){
    ttLayerGroup.clearLayers();
}

Answer 2

You have only one var ttPoly for all your created polygons, so at any given moment it points only to the last created polygon.

One way of resolve this problem is to have array var ttPolyActive = [] to which you add every created poly and iterate through it when you want to remove them.

Your code could then look something like this:

var ttPolyActive = [];
$("#btnGenerate").click(function() {
  $.ajax({
    url: 'php/traveltime.php',
    type: 'POST',
    data:{eno:enos,
      travel_mode: $("#travelmode").val(),
      travel_time: $("#traveltime").val()                            
    },
    success: callbackTT
  });
  
  function callbackTT(response) {                
    var ttPoly = L.geoJSON(JSON.parse(response), {forEach:function(ttPoly){
       var poly =L.polygon(ttPoly.geometry.coordinates);
    }}); 

    ttPoly.setStyle({
      color:'purple',
      fillOpacity:0.4
    });
    $("#dlgTravelTime").hide();
    ttPoly.addTo(mymap);
    ttPolyActive.push(ttPoly);
  };               
});
    
function removeTraveltime(enos) {
  ttPolyActive.forEach(function(ttPoly) {
    mymap.removeLayer(ttPoly);                        
  });
  ttPolyActive = [];
}