How to remove directions control on mapbox maps?

I’m using the plugin “mapbox-gl-directions” to get distance. I want to remove the direction control inside the maps.

Here is an example guide on image => example of what I’m trying to do

Is it possible to remove that and keep the distance box?

Here is my code:

    mapboxgl.accessToken = 'TOKEN';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [112.16809,-8.09774],
        zoom: 17,   
    });

    var directions = new MapboxDirections({
        accessToken: mapboxgl.accessToken,
        unit: 'metric',
        profile: 'mapbox/driving'
    });

    map.addControl(directions,'top-left');

    map.on('load',  function() {
        directions.setOrigin("England"); // can be address in form 
        setOrigin("12, Elm Street, NY")
        directions.setDestinaion([112.17211,-8.09581]);})

    // Add geolocate control to the map.
    map.addControl(
    new mapboxgl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true
        },
        trackUserLocation: true
    })
    );

Thank you.

Answer

Maybe using the {controls: {instructions: false;}} – directive when you’re initializing the map

Otherwise, as a quick hack, that might work, and since I’m assuming you’re planning to run this on a browser: Find out the css class or id by using Dev Tools (normally something like F12) and in your styles (some css file or html tag) add

#that-particular-id {
 display: none;
}
//or
.that-particular-class {
 display: none;
}