0
I have this class in my CSS:
.botao-localizacao{
display: block;
}
It doesn’t 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 by inserting html through the append, it contains this class but I can’t 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 the $(document).on, only that I would not like to add any event to her, just seek this class.
This is where I insert the 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>`
);
}
Take a look at the class . location
<div class="atalhos-cartoneira col s3 botao-localizacao" style="background-color: #757575;">
<i class="material-icons localizacao" id=${id}>place</i>
</div>
In any of these elements, I will need to remove this class/hide. I mean, there will no longer be all this html that is just 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>
If the class is interfering with your element, it wouldn’t be easier to remove it from the element than trying to edit the class with JS in CSS, at the risk of generating numerous side effects?
– Woss
@Andersoncarloswoss actually I insert several with the same HTML, so only some of these elements will have this class, so I would have to do something like $("knob-location > id") to change only what needs to be changed.
– user132413
You can post some part of your code, which you have already done?
– Alvaro Alves
To seek this class with jQuery you can use
$('.botao-localizacao'), to add the class to an element$(meuElemento).addClass('botao-localizacao');– Icaro Martins
This is looking like an XY problem, where you need help to do something that is not the solution to the problem. Maybe it will be interesting you [Dit] the question and create a [mcve] that shows us the real problem, so we can help you decide which is the best solution.
– Woss
@Alvaroalves edited the question.
– user132413
@Andersoncarloswoss edited the question.
– user132413
@Icaromartins this does not work because the element I want to add the class does not exist in DOM.
– user132413
Now it seems to me that you are looking for a way to change Cssrule
document.styleSheets. maybe one of these links will help you. Cssstylesheet , pt.stackoverflow , en sackoverflow– Icaro Martins
You add the data by ajax and want to hide the button after ajax loads, right?
– edson alves