JSFiddle - React, Tailwind, and code Playground
HTML
<div class="containerMensagem">
<div class="selectedMensagem">
<input class="idMenssagem" hidden="hidden" value="2" />
</div>
<div class="emails mensagemEnviadaBorder">
<input class="idMenssagem" hidden="hidden" value="2" />
<div class="idEmails mensagemEnviada">RR</div>
<div class="origemEmails">Marcos Alberto</div>
<div class="dataeHoraEmails">05/01/2016</div>
<div class="flagEmails">Enviado</div>
<div class="assuntoEmails">Aqui virá o assunto exemplo</div>
<div class="acoes">
<input type="checkbox" class="caixaseletora">
<a href="javascript:void(0)" class="botaodeletar">Excluir</a>
</div>
</div>
</div>
<div class="containerMensagem">
<div class="selectedMensagem">
<input class="idMenssagem" hidden="hidden" value="2" />
</div>
<div class="emails mensagemEnviadaBorder">
<input class="idMenssagem" hidden="hidden" value="2" />
<div class="idEmails mensagemEnviada">RR</div>
<div class="origemEmails">Marcos Alberto</div>
<div class="dataeHoraEmails">05/01/2016</div>
<div class="flagEmails">Enviado</div>
<div class="assuntoEmails">Aqui virá o assunto exemplo</div>
<div class="acoes">
<input type="checkbox" class="caixaseletora">
<a href="javascript:void(0)" class="botaodeletar">Excluir</a>
</div>
</div>
</div>
<div class="containerMensagem">
<div class="selectedMensagem">
<input class="idMenssagem" hidden="hidden" value="2" />
</div>
<div class="emails mensagemEnviadaBorder">
<input class="idMenssagem" hidden="hidden" value="2" />
<div class="idEmails mensagemEnviada">RR</div>
<div class="origemEmails">Marcos Alberto</div>
<div class="dataeHoraEmails">05/01/2016</div>
<div class="flagEmails">Enviado</div>
<div class="assuntoEmails">Aqui virá o assunto exemplo</div>
<div class="acoes">
<input type="checkbox" class="caixaseletora">
<a href="javascript:void(0)" class="botaodeletar">Excluir</a>
...
CSS
.window{
display:none;
width:300px;
height:415px;
position:absolute;
background:#FFF;
z-index:9900;
padding:10px;
border-radius:10px;
top: 50%;
left: 50%;
margin-top: -207px;
margin-left: -150px;
}
.window1{
display:none;
width:300px;
height:200px;
position:absolute;
background:#FFF;
z-index:9900;
padding:10px;
border-radius:10px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
#lixeira, #lixeiraReuniao, #jaExistente, .NovoVisitante{
width: 130px;
height: 45px;
background: #EF473A;
color: white;
border-radius: 7px;
border-color: #D74040;
}
#delCompleto, #delCompletoReuniao{
width: 130px;
height: 45px;
background: #EF473A;
float: right;
color: white;
border-radius: 7px;
border-color: #D74040;
}
.mascara{
display:none;
position:absolute;
left:0;
opacity: 0.9;
top:0;
width: 100%;
height: 100%;
z-index:9000;
background-color: #000;
}
.ion{
font-size: 20px;
}
.fechar{
display:block; text-align:right;
}
#lbl_Rua_Reu,
#lbl_Bairro_Reu,
#lbl_Numero_Reu,
#lbl_Complemento_Reu,
#lbl_Cidade_Reu,
#lbl_Estado_Reu,
#lbl_CEP_Reu,
#lbl_Palavra_Reu,
#lbl_QuebraGelo_Reu,
#lbl_Louvor_Reu,
#lbl_Lanche_Reu,
#lbl_Descr_Reu{
width: 100%;
margin-top: 3px;
margin-bottom: 3px;
padding: 10px;
display: none;
}
#lbl_Rua_ReuEdit,
#lbl_Bairro_ReuEdit,
#lbl_Numero_ReuEdit,
#lbl_Complemento_ReuEdit,
#lbl_Cidade_ReuEdit,
#lbl_Estado_ReuEdit,
#lbl_CEP_ReuEdit,
#lbl_Palavra_ReuEdit,
#lbl_QuebraGelo_ReuEdit,
#lbl_Louvor_ReuEdit,
#lbl_Lanche_ReuEdit,
#lbl_Descr_ReuEdit{
width: 100%;
margin-top: 3px;
margin-bottom: 3px;
padding: 10px;
display: none;
}
[for="esconder"] {
display: none;
}
.bloqueiaTela{
display: none;
position: absolute;
z-index: 9999;
width: 100%;
height: 100%;
background: #DCDCDC;
}
#salvando{
...
JavaScript
$('.botaodeletar').on('click', function() {
var $parent = $(this).parents('.containerMensagem')
if (!$parent.is('.podedeletar')) {
return alert('marque a caixinha para deletar');
}
var confirmation = confirm("Deseja realmente deletar este email?");
if (confirmation == true) {
$parent.remove();
}
});
$('.caixaseletora').on('change', function() {
var $parent = $(this).parents('.containerMensagem').removeClass('podedeletar')
if ($(this).is(':checked')) {
$parent.addClass('podedeletar')
}
});