Remove Class from an element two levels above the clicked element

Question

You guys, I own a lot of divs like that:

<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>

When my user clicks on the DIV see functionality I want it to remove the class (dark blue) from the DIV "image-functionality".

I can do all the rest of the process but I can’t remove this DIV, I can’t just ask it to give a FIND, because I need to remove only that specific DIV that was clicked. I tried to do it with Parent() but I can only go back one level. I also did some tests used parentElement, but it does not allow to use together removeClass(". dark blue").

Tests carried out:

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

Answer 1

Use .closest() and .prev() to reach the previous div to the parent div where the clicked element is:

$(".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>

Answer 2

Hello Fabio the approach @Sam made is a great.

Also note that if you want to remove 'dark blue' from all elements then you can get away with something as simple as

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

And this should spread through the tree easily. However, I can see this causing a headache in performance if the DOM is very populated.

EDIT: Look at this CODE I adapted and put the "see-functionality" class on Button so that it works as your image since it is broken.