Taking ID of the upper click div

Question

I need to get the ID of the DIV superior to what the button is, for example:

<div id="1">
  <button id="1"></button>
</div>
<div id="2">
  <button id="2"></button>
</div>

If I click the 2 button it must enter the div 2 name, but what becomes a problem is that there are several other div within the 2 div, the real example follows below:

        <div class="upage hidden background_PRINCIPAL" id="lista_REUNIAO">
        <div class="upage-outer fixed-header-footer">
            <ion-header-bar class="bar inner-element uib_w_37 colorGeral bar-positive bar-header" data-uib="ionic/header" data-ver="0" align-title="center">
                <div class="buttons widget-container content-area horiz-area wrapping-col">
                    <button class="button widget uib_w_39 d-margins ion ion-chevron-left" data-uib="ionic/button" data-ver="0" id="btn_Voltar_Minha_Celula"></button>
                </div>
                <h1 class="title">Historico de Reuniões</h1>
                <div class="buttons widget-container content-area horiz-area wrapping-col"></div>
            </ion-header-bar>
            <div class="upage-content content-area" id="page_9_17">
                <div id="barSelectAll">
                    <li class="item item-checkbox colorCheck">
                        <label class="checkbox checkbox-dark">
                            <input type="checkbox" id="selectAll">
                        </label>
                        <span class="textoSelecionarTodos">Selecionar todos</span>
                    </li>

                </div>
                <ul class="list" id="listaReunioes"></ul>
                <div id="barOption">
                    <div class="button-bar widget uib_w_69 d-margins" data-uib="ionic/button_bar" data-ver="0">
                        <a href="#janela" rel="modal">
                            <button class="button widget uib_w_70 button-assertive ion ion-android-close" data-uib="ionic/button" data-ver="0"></button>
                        </a>
                        <button class="button widget uib_w_71 button-positive ion ion-edit" data-uib="ionic/button" data-ver="0" id="btnAlteraReuniao"></button>
                    </div>
                </div>
                <div class="window" id="janela">
                    <a href="#" class="fechar">
                        <img src="images/icones/close_4-512.png" width="25px" height="25px">
                    </a>
                    <h4>Você tem certeza que deseja deletar esta(s) reuniões ?</h4>
                    <p>Se estiver certo desta decisão oferecemos duas opções para você. Recomendamos a escolha da primeira.</p>
                    <p>A primeira você clica em 'Enviara para Lixeira', esta opção você terá condição de refazer.</p>
                    <p>A segunda você clica em 'Excluir', caso escolha esta opção esteja ciente que não tera como refazer,</p>
                    <p>tudo que estiver ligado a este membro será excluido.</p>
                    <button id="lixeira">Enviar para Lixeira</button>
                    <button id="delCompleto">Excluir</button>
                </div>
            </div>
        </div>
    </div>

I need this to scrollTOP in the correct div follow what I use today:

   $("a[rel=modal]").click( function(ev){
 ev.preventDefault();
 var body = document.getElementById("page_31_31"); //AQUI TEM QUE SER O ID DA DIV ONDE AQUELE BOTAO SE ENCONTRA
 body.scrollTop = 0;
$(body).animate({scrollTop:$(this.hash).offset().top}, 800);

var id = $(this).attr("href");

   var alturaTela = $(body).height();
    var larguraTela = $(window).width();

//colocando o fundo preto
$('#mascara').css({'width':larguraTela,'height':alturaTela});
$('#mascara').fadeIn(1000); 
$('#mascara').fadeTo("slow",0.8);

var left = ($(window).width() /2) - ( $(id).width() / 2 );
var top = ($(window).height() / 2) - ( $(id).height() / 6 );

$(id).css({'top':top,'left':left});
$(id).show();   
});

Answer 1

An example below using the closest and a class as defined in div father.

$(document).ready(function(){
  $("#btn-1").on('click', function(){
    var divId = $(this).closest('div.area').attr('id');
    $("#resultado").text(divId);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="area" id="rh">
  <button id="btn-1"> Clique Aqui </button>
  <br/><br/>
  <div id="resultado"></div>
</div>

Answer 2

Using the function parent() in jQuery you take the parent element of the element in question.

In the example below, by clicking the button you are setting the background of the red parent div.

Reference

$('button').on('click', function() {
  $(this).parent().css("background-color", "red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
  <button id="1">filho 1</button>
</div>
<div id="2">
  <button id="2">filho 2</button>
</div>