Hiding elements inserted with append

Asked

Viewed 66 times

2

I have this code:

db.transaction (function (tx) {
            tx.executeSql(`SELECT * FROM cartoes WHERE usuario = ${0}`, [], function(tx, results){
                for(var i=0; i<results.rows.length; i++) {
                    var nomeEmpresa = results.rows.item(i).empresa;
                    var nome = results.rows.item(i).nome;
                    var id = results.rows.item(i).id;
                    var d = new Date();
                    var capa = results.rows.item(i).img2 + '?time=' + d.getTime();

                    $(".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" id=${id} 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>`
                    );
                }
            });
        });

This code has the function to list all user cards.

Visually it looks like this: inserir a descrição da imagem aqui

(the second stayed that way because it has no image).

What I want to do is this..

I have in my bank, also, the address table. No card is required to have address. If not, I want to remove the location button(address) ONLY on the card that has no address, so it would look like this:

inserir a descrição da imagem aqui

To do this, I make an appointment at the bank and check which cards have no address:

db.transaction (function (tx) {
  tx.executeSql(`SELECT * FROM enderecos WHERE cartao = ${id}`, [], function(tx, results){
      for(var i=0; i<results.rows.length; i++) {
          var endereço = results.rows.item(i).endereco;

          if(endereco == ""){
          //AQUI É ONDE MORA O PROBLEMA. EU QUERO ESCONDER/REMOVER O BOTÃO SOMENTE NO CARTÃO QUE NÃO TEM ENDEREÇO. COMO PODERIA FAZER ISSO?
          }
      }
   });
});

The last code is where the problem lives... I want to hide the button only on the card that has no address. How could I do this?

This is the div that was inserted through the append that I need to hide/remove:

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

1 answer

0

Can use a ternary operator within the template string with the part of the button in question:

<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>
           ${endereco ?
           `<div class="atalhos-cartoneira col s3 botao-localizacao" id=${id} 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> 

See in the example below that the address in "emp2" is empty and the said div "place is not shown":

results = [
   { empresa: "emp1", nome: "nome1", id: "id1", img2: "im2", endereco: "end1" },
   { empresa: "emp2", nome: "nome2", id: "id2", img2: "im2", endereco: "" },
   { empresa: "emp3", nome: "nome3", id: "id3", img2: "im3", endereco: "end3" }
];

 for(var i=0; i<results.length; i++) {
     var endereco = results[i].endereco;
     var nomeEmpresa = results[i].empresa;
     var nome = results[i].nome;
     var id = results[i].id;
     var d = new Date();
     var capa = results[i].img2 + '?time=' + d.getTime();

     $(".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[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>
                             ${endereco ?
                             `<div class="atalhos-cartoneira col s3 botao-localizacao" id=${id} 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>`
     );
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listagem-cartoes"></div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.