title: Listen the click on the "X" button of a MapBox Geocoder
body: <p>I want to use a MapBox Geocoder (outside a Map) to visualize and hide/clear a point from the map.</p>
  <p>Whenever a user searches for an address,
  I use</p>
  <p><code>geocoder.on('result', function (e) {...}</code></p>
  <p>to create a point, populate a layer and visualize it on the map.</p>
  <p>I want to clear/clean the layer whenever the user clicks on the &quot;x&quot; button.</p>
  <p><a href="https://i.stack.imgur.com/YGIkt.png" rel="nofollow noreferrer">Clear Mapbox geocode</a></p>
  <p><em>Any ideas on how can I listen for the click on the &quot;X&quot; button of a MapBox Geocoder?</em></p>
  <p>I had a look of the <a href="https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#examples" rel="nofollow noreferrer">doc</a> but without much luck till now!</p>
  <p>My code looks like this:</p>
  <pre><code>function point (){
  geocoder.on('result', function (e) {
      console.log(e)
      if (e.result.place_name &amp;&amp; e.result.center) {
          var point = create_feature(e.result.place_name, e.result.center[0], e.result.center[1])
  
          //Add points on the map
          map.getSource('blablabla').setData({
              type: 'FeatureCollection',
              features: [point]
          });
      }
  
  })
  };
  
  function create_feature(userId, x, y) {
      var user_feature = {
          'type': 'Feature',
          'properties': {
              'description': userId
          },
          'geometry': {
              'type': 'Point',
              'coordinates': [x, y]
          }
      };
      return user_feature;
  };
  </code></pre>