Temporarily hiding features that are not selected at the moment in Leaflet

Question

How can I set focus on the selected feature by additionally and temporarily hiding other features that are not selected at the moment.

Here is my code:

var highlight = {
       'color': '#149c14',
       'weight': 4,
       'opacity': 1
   };

$.getJSON("/data/geojson/gen.json", function(data){
           var genlayer = L.geoJson(data,{
           style:function(feature){
               return {color:"red"};
           },
           onEachFeature:function(feature, layer){
               layer.on('click', function(e){
                    //do functions to selected feature
                    selectedFeature = e.target;
                    layer.setStyle(highlight);
               });
           }
      });
    roads.addLayer(genLayer);
   });

Answer 1

One possibility to solve this would be to add one more GeoJSON layer genlayer2, which is initially empty and later used only to show clicked highlighted feature.

When feature is clicked, whole genlayer layer is hidden by beeing removed from the map, and clicked feature is added to genlayer2 layer to be shown.

You didn't describe how would you remove highlight from the selected feature and return initial state. In the code below this is done by clicking again on the selected feature. Then genlayer2 layer is cleared and genlayer layer again added to the map.

So the code could then look something like this:

var highlight = {
  'color': '#149c14',
  'weight': 4,
  'opacity': 1
};

var genlayer;

var genlayer2 = L.geoJson(null, {
  style: highlight,
  onEachFeature: function(feature, layer) {
     layer.on('click', function(e) {
      genlayer2.clearLayers();
      roads.addLayer(genLayer);
     });
   }
}).addTo(map);

$.getJSON("/data/geojson/gen.json", function(data){
  genlayer = L.geoJson(data, {
    style: function(feature){
      return {color:"red"};
    },
    onEachFeature: function(feature, layer){
      layer.on('click', function(e){
        genlayer2.addData(feature);
        roads.removeLayer(genlayer);
      });
    }
  });
  roads.addLayer(genLayer);
});