1

Galera, possuo várias DIVs iguais a essa:

<div class="funcionalidade">
<div class="imagem-funcionalidade azul-escuro">
    <img src="https://www.xxx.com.br/img/xxxx/xxxx/logo-xxx.png"/>
</div>
<div class="conteudo-funcionalidade">
    <div class="conteudo-titulo-funcionalidade">
        <p class="titulo-funcionalidade">XXX XXXX</p>
    </div>
    <div class="ver-funcionalidade">
        <img src="https://www.xxx.com.br/img/controle_transportadoras/func-xxx.png" id="emissao-de-cte" class="img-ver-mais" />
    </div>
</div>

Quando o meu usuário clicar sobre a DIV ver funcionalidade eu quero que ele remova a classe (azul-escuro) da DIV "imagem-funcionalidade".

Consigo fazer todo o restante do processo porém não consigo remover esta DIV, eu não posso simplesmente pedir para ele dar um FIND, porque preciso remover apenas daquela DIV específica que foi clicada. Tentei fazer também com o parent() porém só consigo voltar um nível atrás. Fiz também alguns testes utilizado o parentElement, mas ele não permite utilizar junto o removeClass(".azul-escuro").

Testes feitos:

$(this).parent(".imagem-funcionalidade").removeClass("azul-escuro");
this.parentElement.parentElement.parentElement.removeClass(".azul-escuro");
this.parentElement.parentElement.parentElement.parent(".imagem-funcionalidade")removeClass(".azul-escuro")

2 Respostas 2

1

Use .closest() e .prev() para chegar na div anterior a div pai onde o elemento clicado está:

$(".ver-funcionalidade").on("click", function(){
   
   $(this) // elemento clicado
   .closest(".conteudo-funcionalidade") // seleciona a div pai pela classe
   .prev() // seleciona a div anterior da div pai
   .removeClass("azul-escuro"); // remove a classe
   
});
.azul-escuro{
   background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="funcionalidade">
<div class="imagem-funcionalidade azul-escuro">
    <img src="https://www.xxx.com.br/img/xxxx/xxxx/logo-xxx.png"/>
</div>
<div class="conteudo-funcionalidade">
    <div class="conteudo-titulo-funcionalidade">
        <p class="titulo-funcionalidade">XXX XXXX</p>
    </div>
    <div class="ver-funcionalidade">
         clique na imagem abaixo:
         <br>
        <img src="https://www.xxx.com.br/img/controle_transportadoras/func-xxx.png" id="emissao-de-cte" class="img-ver-mais" />
    </div>
</div>

1
  • realmente isso solucionou meu problema, agradeço muito a sua ajuda, muito obrigado! Commented 18/06/2019 às 11:46
0

Olá Fábio a abordagem que o @Sam fez é uma ótima.

Observe também que, se você quiser remover 'azul-escuro' de todos os elementos, então você pode se safar com algo tão simples quanto

$(".ver-funcionalidade").on("click", function(){
 $('.azul-escuro').removeClass('azul-escuro');
});

E isso deve se propagar pela árvore facilmente. No entanto, posso ver isso causando uma dor de cabeça no desempenho se o DOM estiver muito populado.

EDIT: Veja esse CÓDIGO adaptei e coloquei a classe "ver-funcionalidade" no Button para que ele trabalhe como a sua imagem já que ela está quebrada.

1
  • Valeu, dessa forma eu havia conseguido também, mas muito obrigado de qualquer forma! Commented 18/06/2019 às 11:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .