How to hide <span> value under class

Question

How can I hide span value under .fa .fa-search class http://prntscr.com/fr3vvk

<div role="tabpanel" class="tab-pane fade in active" id="stm_all_listing_tab">
                <form action="" method="GET">
                    <button type="submit" class="heading-font"><i class="fa fa-search"></i> <span>76</span> Lorry                        </button>
                    <div class="stm-filter-tab-selects filter stm-vc-ajax-filter">
                        <div class="row"><div class="col-md-3 col-sm-6 col-xs-12 stm-select-col"><div class="stm-ajax-reloadable"><select name="condition" data-class="stm_select_overflowed" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"><option value="">Choose Condition</option><option value="new-cars">New (10) </option><option value="rebuild">Rebuild (28) </option><option value="used-cars">Second Hand (38) </option></select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 141px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-condition-w3-container"><span class="select2-selection__rendered" id="select2-condition-w3-container" title="Choose Condition">Choose Condition</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span></div></div><div class="col-md-3 col-sm-6 col-xs-12 stm-select-col"><div class="stm-ajax-reloadable"><select name="body" data-class="stm_select_overflowed" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"><option value="">Choose Body</option><option value="box">Box (8) </option><option value="cargo">Cargo (23) </option><option value="crane">Crane (4) </option><option value="flatbed">Flatbed (1) </option><option value="no-body">No-body (2) </option><option value="others">Others (2) </option><option value="roll-on-roll-off">Roll-on-Roll-Off (2) </option><option value="skylift">Skylift (2) </option><option value="tipper">Tipper (22) </option><option value="trailer">Trailer (10) </option></select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 144px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-body-0d-container"><span class="select2-selection__rendered" id="select2-body-0d-container" title="Choose Body">Choose Body</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span></div></div><div class="col-md-3 col-sm-6 col-xs-12 stm-select-col"><div class="stm-ajax-reloadable"><select name="make" data-class="stm_select_overflowed" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"><option value="">Choose Brand</option><option value="bison">Bison (0) </option><option value="daihatsu">Daihatsu (16) </option><option value="dong-feng">Dong Feng (0) </option><option value="ford">Ford (0) </option><option value="fuso">Fuso (4) </option><option value="hicom">Hicom (4) </option><option value="hino">Hino (6) </option><option value="inokom-truck">Inokom Truck (1) </option><option value="isuzu">Isuzu (11) </option><option value="jac">JAC (0) </option><option value="jbc">JBC (0) </option><option value="mazda">Mazda (3) </option><option value="mercedes-benz">Mercedes-Benz (0) </option><option value="nissan">Nissan (15) </option><option value="renault">Renault (0) </option><option value="scania">Scania (4) </option><option value="shacman">Shacman (8) </option><option value="suzuki">Suzuki (0) </option><option value="tata">Tata (0) </option><option value="toyota">Toyota (1) </option><option value="ud-trucks">UD Trucks (1) </option><option value="volvo">Volvo (2) </option></select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 145px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-make-5f-container"><span class="select2-selection__rendered" id="select2-make-5f-container" title="Choose Brand">Choose Brand</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span></div></div><div class="col-md-3 col-sm-6 col-xs-12 stm-select-col"><select class="stm-filter-ajax-disabled-field select2-hidden-accessible" name="max_price" data-class="stm_select_overflowed" tabindex="-1" aria-hidden="true"><option value="">Max Price</option><option value="5000">RM 5 ,000</option><option value="10000">RM 10 ,000</option><option value="15000">RM 15 ,000</option><option value="20000">RM 20 ,000</option><option value="30000">RM 30 ,000</option><option value="40000">RM 40 ,000</option><option value="50000">RM 50 ,000</option><option value="70000">RM 70 ,000</option><option value="80000">RM 80 ,000</option><option value="100000">RM 100 ,000</option></select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 105px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-max_price-sn-container"><span class="select2-selection__rendered" id="select2-max_price-sn-container" title="Max Price">Max Price</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span></div></div>                        </div>
                </form>
            </div>

Solution

This can easily be targeted by sibling selector and apply display: none:

.fa-search + span {display: none;}

If you want the value just be hidden, you can use:

.fa-search + span {visibility: hidden;}

Or, if you want it to be hidden from the view but should be copy-able, you can use a technique like:

.fa-search + span {width: 0px; height: 0px; display: inline-block; overflow: hidden;}

Comments

[Praveen Kumar Purushothaman]

@Farruh Awesome... I have added more details as well.