Changing a CSS class by JavaScript

I have this class in my CSS:

.botao-localizacao{
    display: block;
}

It does not exist in my html, only in CSS.

So, my question is: how do I change it in my javascript / jquery?

EX:

.botao-localizacao{
    display: none;
}

I want to do this because by inserting html through append, it contains this class but I can not access it.

Or would there be a way for me to access this class more easily? I know that for this I need to use $(document).on , but I would not like to add any event to it, just fetch that class.

This is where I enter HTML:

for(var i=0; i<results.rows.length; i++) {
    $(".listagem-cartoes").append(
        '<div style="width: 100%; overflow-x: hidden;">
            <div class="cartoes">
                <div class="item-total">
                    <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%;">
                        <div class="card-panel grey lighten-5 z-depth-1">
                            <div class="row valign-wrapper foto" id = ${id}>
                                <div class="col s3 lista-cartoneira editar-cartao" style="padding-left: 0px;">
                                    <img src="${results.rows.item(i).img2 + '?time=' + d.getTime()}" alt="" class="circle responsive-img foto" id=${id}> 
                                </div>
                                <div class="col s9 lista-cartoneira">
                                    <h1>${nomeEmpresa}</h1>
                                    <h2>${nome}</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col s12 m8 offset-m2 l6 offset-l3" style="width: 50%; float: right; margin-top: -136px;">
                    <div class="card-panel grey lighten-5 z-depth-1">
                        <div class="row valign-wrapper botoes">
                            <div class="atalhos-cartoneira col s3" style="background-color: #00b0ff;">
                                <i class="material-icons telefone" id=${id}>phone</i>
                             </div>
                             <div class="atalhos-cartoneira col s3" style="background-color: #ffb74d;">
                                 <i class="material-icons email" id=${id}>email</i>
                             </div>
                             <div class="atalhos-cartoneira col s3 botao-localizacao" style="background-color: #757575;">
                                 <i class="material-icons localizacao" id=${id}>place</i>
                             </div>
                             <div class="atalhos-cartoneira col s3" style="background-color: #00BFA5;">
                                 <i class="material-icons compartilhar" id=${id}>open_in_new</i>
                             </div>
                         </div>
                     </div>
                 </div> 
             </div>
         </div>'
     );
}

Look at the class .boot-location there

<div class="atalhos-cartoneira col s3 botao-localizacao" style="background-color: #757575;">
    <i class="material-icons localizacao" id=${id}>place</i>
</div>

In some of these elements, I'm going to need to remove this class / hide. That is, there will no longer exist all this html that is nothing more than a button. So I wanted to do something like: $(.botao-localizacao > id).css('display', 'none') ou $('.botao-localizacao > id').hide();

<div class="atalhos-cartoneira col s3 botao-localizacao" style="background-color: #757575;">
    <i class="material-icons localizacao" id=${id}>place</i>
</div>