Catch Divs with certain class

Question

I need to make a system to delete messages, these messages are placed inside div’s, where I divide like html just below. As in the check box there is a location for the click, I separated a div that will simulate the movement of a click, when clicking this div it should change its appearance, so that it is evident that that div is marked. At another precise moment a delete message button, which will scan the DOM behind Divs with the particular added class.

Example: I have DIV-A, inside there are several other Ivs including DIV-MARQUE, when clicking on this DIV-MARQUE, I need a class to be added to it, stating that it is "selected". When clicking on a BOOT-DELETE, I need a function that scans the page Divs behind the informed class.

So I need to summarize two coiasas

1° - When clicking on the DIV add a class 'x' to it.

2° - When clicking the "delete" button I need to get the ID’s located inside the div selected with class 'x'

Below my dynamically mounted HTML:

+' <div> '
+' <div class="selectedMensagem">'
+'  <input class="idMenssagem" hidden="hidden" value="'+ ponteiro.COD_IDENT_COMUN +'" /> '
+' </div>'
+' <div class="emails mensagemEnviadaBorder">'
+'   <input class="idMenssagem" hidden="hidden" value="'+ ponteiro.COD_IDENT_COMUN +'" />'
+'   <div class="idEmails mensagemEnviada">' + letrasEmail(pointer.TXT_NOMEX_PESSO) + '</div> '
+'   <div class="origemEmails">' + pointer.TXT_NOMEX_PESSO + '</div> '
+'   <div class="dataeHoraEmails">' + inverteData(ponteiro.DAT_ENVIO_COMUN, 'data') + '</div>'
+'   <div class="flagEmails">Enviado</div>'
+'   <div class="assuntoEmails">' + ponteiro.TXT_ASSUN_COMUN + '</div>'
+' </div>'
+' </div>';

The idea is I click on selectedMensagem, he guard the id, contained in the idMenssagem and do what I described in the above message.

Thank you in advance.

Project Jsfiddle

Answer 1

I believe this meets your need:

$('.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')
}
});

.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{
margin-left: 10%;
margin-top: 40%;
}

#buttonsRelatorio{
margin-bottom: 15px;
}

.zindex{
/*   position: static;
z-index: 1;*/
}

#myImage{
width: 100%;
height: 300px;
border: 3px #d3d3d3;
background: #fff;
display: none;
}

#ajusteTeclado{
height: 200px;
display: none;
}

#ajusteTOP{
height: 50px;
}

#ajusteBottom{
margin-bottom: 45px;
}

#barSelectAll{
margin-top: 5px;
width: 100%;
padding-left: 5px;
padding-right: 5px;
background-color: #6C7A89;
display: block;
margin-bottom: 5px;
}

.colorCheck{
background-color: #6C7A89;
border-color: #6C7A89;
color: #fff;
}

.reuniaoCheck{
padding-left: 60px;
top: 50%;
right: 8px;
left: 8px;
margin-top: -46px;
}

#barOption{
display: none;
}

#DeletemyImage{height: 30px;}

#abaVisitantes{
background-color: #2980b9;
height: 30px;
width: 96%;
margin-bottom: 30px;
margin-left: 2%;
margin-top: 15px;
}
#iconePlus{
margin-top: -30px;
color: white;
font-size: 22px;
float: right;
margin-right: 12px;
}
#tituloVisitantes{
padding: 5px;
color: white;
}
#abaPresentes{
background-color: #606060;
height: 80px;
width: 100%;
margin-bottom: 5px;
/* margin-left: 2%; */
/* margin-top: 15px; */
}
#camposPresentes{
padding: 10px;
}
#tituloCelulaPresentes{font-weight: normal;}
#localCelulaPresentes{font-weight: normal;}
#HoraCelulaPresentes{font-weight: normal;}
.inline-flex{
font-size: 16px;
display: inline-flex;
color: white;
font-weight: bold;
}

#bottonsBar{
margin-top: 10px;
/* margin-bottom: 67px; */
}
.bottonWork{
position: relative;
text-align: center;
border-radius: 5px;
margin-left: 5%;
float: left;
height: 27vw;
width: 27vw;
}

#mensagens{
background-color: #446CB3;
}
#aniversariantes{
background-color: #FF9A50;
}
#alertas{
background-color: #D91E18;
}
img#cake{
width: 38%;
margin-top: 6vw;
margin-left: 2vw;
}
b.ion{
margin-top: 8vw;
/* vertical-align: middle; */
color: white;
font-size: 10vw !important;
}
.qtdMensagem, .qtdAniver, .qtdAlertas{
color: white;
border-radius: 100px;
background-color: black;
width: 20px;
height: 20px;
/* float: right; */
margin-left: 16vw;
margin-top: -4vw;
position: relative;
}
.caixadeEmail{
background-color: white;
height: 15vw;
width: 100%;
}
.emails{
background-color: white;
height: 19vw;
/* margin-bottom: 5px; */
width: 96%;
/* position: absolute; */
/* border-bottom: 10px; */
border-style: solid;
border-bottom: solid 1px #ff0000;
/* border-color: black; */
padding: 15px;
margin-left: 2%;
margin-top: 10px;
}
.idEmails{
background-color: red;
height: 10vw;
width: 10vw;
border-radius: 52px;
color: white;
text-align: center;
padding-top: 2vw;
font-size: 5vw;
margin-left: 3vw;
/* margin-top: 6vw; */
}
.origemEmails{
float: left;
margin-left: 15vw;
margin-top: -9vw;
font-size: 15px;
font-weight: bold;
}
.dataeHoraEmails{
font-size: 12px;
float: right;
margin-top: -9vw;
margin-right: 0vw;
color: gray;
}
.assuntoEmails{
margin-left: 16vw;
margin-top: -3vw;
font-style: oblique;
}

.graph-container {
padding: 28vw;
border: 1px solid #ccc;
box-shadow: 1px 1px 2px #eee;
margin: 10px 0;
/* background-color: red; */
margin-top: 32vw;
}

h19{
color: #7f8c8d
}

#textoNao{
text-align: center;
margin-top: 11vw;
}
.caixa_Aniversario{
background-color: white;

padding: 10px;
margin-bottom: 5px;
margin-top: 5px;
border-style: solid;
border-bottom: solid 2px #27ae60;
}
.dtAniversario{
color: #31465a;

font-weight: bold;
}
.nmAniversariante{
font-size: 20px;

}
.telAniversariante{
font-style: normal;

}
.iconeChamada{
height: 35px;
width: 30px;
background: #27ae60;
text-align: center;
border-radius: 6px;
color: white;
vertical-align: middle;
float: right;
margin-right: 15px;
margin-top: -47px;
}

#caixadeAniversario{
padding: 10px;
}

#fromCabecalho{
/* white-space: nowrap; */
padding: 20px;
margin-bottom: -12px;
}

#iniMenssagem{
padding-top: 4px;
height: 30px;
width: 30px;
background-color: #d35400;
font-size: 15px;
color: white;
text-align: center;
vertical-align: middle;
border-radius: 20px;
}

#nmMenssagem{

font-size: 25px;
margin-top: -26px;
margin-left: 35px;
color: #2c3e50;
}

#hrEnviaMenssagem{
font-size: 14px;
margin-left: 35px;

color: #7f8c8d;
}

#remetente{
font-size: 18px;

font-weight: bold;
text-align: center;
margin-bottom: 2px;
margin-top: 10px;
}

#conteudoMenssagem{
text-align: justify;
padding: 17px;
}

.menssagemLida{
background-color: #27ae60 !important;
}

.menssagemLidaBorder{
border-style: solid;
border-bottom: solid 1px #27ae60 !important;
}
.mensagemEnviada{
background-color: #8e44ad !important;
}

.mensagemEnviadaBorder{
border-style: solid;
border-bottom: solid 1px #8e44ad !important;
}
.botaoSincronismo{
text-align: center;
height: 9vw;
display: none;
width: 100%;
background-color: #404040;
margin-top: 10px;
margin-bottom: 10px;
padding: 2vw;
}
h15{
font-weight: bold;
color: white;

/* text-align: center; */
font-size: 4vw;
/* padding: 15px;*/
/* padding-top: 66vw; */
}

.iconeSincronismo{

float: right;
color: #F39C12;
margin-top: -3vw;
margin-right: 5px;
font-size: 9vw !important;
}
.btn_MEMBRO_LISTA{
min-height: 45px !important;
width: 94%;
margin-top: 5px;
margin-left: 3%;
}

#bottonsPrincipais{
margin-top: 13px;

margin-bottom: 2vw;
height: 15vw;
text-align: center;
}
h20{
display: none;
font-size: 3vw;

}
.btnPrincipais{
background-color: #22313F;
color: white;
height: 19vw;
width: 19vw;
float: left;
margin-left: 5%;
border-radius: 5.5px;
}
.btnCadParti{}
.btnCadReuni{}
.btnLisParti{}
.btnLisReuni{}

.iconesPrincipais{
font-size: 16vw !important;
}

.btn_ESCOLHE_CELULA {
margin-left: 2%;
/* height: 98%; */
width: 96%;
margin-top: 2%;
border-radius: 4px;
}
#listaParticipantes{
height: 16vw !important;
margin-top: 7px;
}
h21{
font-size: 10px !important;
}
#textoInformações{
text-align: justify;
padding: 25px;
}

#telaBuscando{
position: absolute;
z-index: 9900;
top: 50%;  left: 50%;  margin-top: -207px;
margin-left: -201px;
display: none;
}

#buscaIcon{

}
#relatorio_Mapa{
height: 200px;
}

#mensagem_Mapa{
margin-top: -33vw;
position: relative;
margin-left: 6vw;
margin-bottom: 18vw;
}
h30{
color: white;
font-size: 7vw;
font-weight: bold;
line-height: initial;
text-align: center;
}
.imgRelatorio{
width: 93vw !important;
}
.botaoAttEndereco{
margin-top: -200px;
left: 50%;
margin-left: -79px;
}
#logoEmpresa{
width: 70px;
left: 50%;
margin-left: -35px;
}
input {
-webkit-user-modify: read-write-plaintext-only;
}
#sincEvolution { width: 90vw; height: 77vh; position: absolute; top: 10vh; left: 5vw; background-color: #b0b0b0; box-sizing: border-box; display: none; z-index: 999999; }
#sincEvolution * { box-sizing: border-box; }
#sincEvolution #tit { width: 100%; height: 5vh; padding: 1vh; background-color: #606060; color: #fafafa; margin-bottom: 1vh; }
#sincEvolution #barraC { width: 100%; height: 10vh; padding: 1vh; margin-bottom: 1vh; }
#sincEvolution #barra { max-width: 100%; /* width: 13%; */ height: 100%; background-color: greenyellow; }
#sincEvolution #log { width: 100%; height: 54vh; background-color: #f0f0f0; overflow-y: auto; overflow-x: hidden; padding: 1vh;}
#sincEvolution #fechar { width: 100%; height: 6vh; padding: 1vh; text-align: center; background-color: green; color: #fafafa; font-size: 2.5vh; }

#novoEmail{
position: fixed;
BORDER-RADIUS: 35PX;
height: 50px;
width: 50px;
background-color: forestgreen;
COLOR: white;
text-align: center;
font-size: 40px;
padding-top: 10px;
/* float: right; */
margin-left: 82vw;
margin-top: -33px;
z-index: 99;
border-style: solid;      
/* border-color: #0000ff; */
border-color: 5pxwhite;
}

.bar.bar-positive.bar-footer { height: 54px; z-index: 99; border-top: solid 10px #c0c0c0; }
.bar.bar-positive.bar-header { height: 54px; z-index: 99; border-bottom: solid 10px #c0c0c0; }

.platform-android .bar .footIgreja { font-size: 14px; }

.abaSelected{
color: #2c3e50;
font-weight: bold;
}
.flagEmails{
float: right;
margin-top: -5vw;
margin-right: 0vw;
color: gray;
}
.selectedMensagem{
height: 19vw;
width: 17vw;
padding-top: -2vw;
margin-left: 3vw;
z-index: 9999999;
position: absolute;
}

.podedeletar .emails { background: #999; }
.acoes { margin-top: 20px; position: relative; clear: both; z-index: 999999999; }
.botaodeletar { display: inline-block; padding: 3px 5px; border: 1px solid #999; background: #e491ae; text-decoration: none; }

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

Working Example: https://jsfiddle.net/cztrvq66/11/

Answer 2

I really don’t understand your problem, whether he’s manipulating a div so that it behaves like a checkbox, or identifying the state of the div/checkbox.

As for customizing the div, I advise you to make an Object that controls when adding or removing style classes and expose the properties checked and indeterminate.

the idea here is to have something like:

var div = Document.getElementById("div.checkbox"); var checkbox = new Checkbox("div");

if (checkbox.checked) {
    console.log("Minha div, ops checkbox está selecionada");
} else {
    console.log("Minha div, ops checkbox não está selecionada");
}

if (checkbox.isIndeterminate) {
    console.log("Minha div, ops checkbox está em um estado indeterminado");
} 

//selecionado a "checkbox"
checkbox.checked = true;

the idea is that you can work with the div.checkbox in the same way that you work with a checkbox... follows the implementation:

/* Inicio - Implementação CheckBox */
var CheckBox = function (element) {
  var self = this;
  this.element = element;
  this.label = document.querySelector("label[for='" + this.element.id + "']");

  this._checked = false;
  this._indeterminate = false;

  this.element.classList.add("unchecked");
  this.element.addEventListener("click", function () {
    self.onCheck(event);
  });

  if (this.label) {
    this.label.addEventListener("click", function () {
      self.onCheck(event);
    });
  }
}

CheckBox.prototype.onCheck = function (event) {
  this.checked = !this._checked;
}

CheckBox.prototype.addEventListener = function (eventName, callback) {
  var self = this;
  this.element.addEventListener(eventName, function (event) {
    callback(event, self);
  });
}

Object.defineProperty(CheckBox.prototype, "checked", {
  get: function () { return this._checked;  },
  set: function (value) {
    this._indeterminate = false;      
    this._checked = value;

    this.element.classList.remove("indeterminate");
    if (this._checked) {
      this.element.classList.remove("unchecked");
      this.element.classList.add("checked");
    } else {
      this.element.classList.remove("checked");
      this.element.classList.add("unchecked");
    }
  }
});

Object.defineProperty(CheckBox.prototype, "indeterminate", {
  get: function () { return this._indeterminate;  },
  set: function (value) {
    this._indeterminate = value;      
    this._checked = false;

    this.element.classList.remove("checked");
    if (this._indeterminate) {
      this.element.classList.remove("unchecked");
      this.element.classList.add("indeterminate");
    } else {
      this.element.classList.remove("indeterminate");
      this.element.classList.add("unchecked");
    }
  }
});
/* Termino - Implementação CheckBox */

var div = document.getElementById("checkbox");
var checkbox = new CheckBox(div);
checkbox.addEventListener("click", function (event, target) {
  if (target.checked) {
    alert('Estou Selecionado');
  } else {
    alert('Não Estou Selecionado');
  }
})

.checkbox {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-size: cover;
}

.checkbox.checked {
  background-image: url('http://cdn.flaticon.com/png/256/24385.png')
}

.checkbox.unchecked {
  background-image: url('http://cdn.flaticon.com/png/256/24396.png')
}

.checkbox.indeterminate {
  background-image: url('http://cdn.flaticon.com/png/256/24374.png')
}

<div id="checkbox" class="checkbox"></div>
<label for="checkbox">Selecionar Todos</label>

The example above, I’m performing a alert where the value of checkbox is amended.

now a more complex example, like 20 Checkboxes plus 1 that allows you to select or remove the selection of all... as well as a button to perform the removal of the selected.

/* Inicio - Implementação CheckBox */
var CheckBox = function (element) {
  var self = this;
  this.element = element;
  this.label = document.querySelector("label[for='" + this.element.id + "']");

  this._checked = false;
  this._indeterminate = false;

  this.element.classList.add("unchecked");
  this.element.addEventListener("click", function () {
    self.onCheck(event);
  });

  if (this.label) {
    this.label.addEventListener("click", function () {
      self.onCheck(event);
    });
  }
}

CheckBox.prototype.onCheck = function (event) {
  this.checked = !this._checked;
}

CheckBox.prototype.addEventListener = function (eventName, callback) {
  var self = this;
  this.element.addEventListener(eventName, function (event) {
    callback(event, self);
  });
}

Object.defineProperty(CheckBox.prototype, "checked", {
  get: function () { return this._checked;  },
  set: function (value) {
    this._indeterminate = false;      
    this._checked = value;

    this.element.classList.remove("indeterminate");
    if (this._checked) {
      this.element.classList.remove("unchecked");
      this.element.classList.add("checked");
    } else {
      this.element.classList.remove("checked");
      this.element.classList.add("unchecked");
    }
  }
});

Object.defineProperty(CheckBox.prototype, "indeterminate", {
  get: function () { return this._indeterminate;  },
  set: function (value) {
    this._indeterminate = value;      
    this._checked = false;

    this.element.classList.remove("checked");
    if (this._indeterminate) {
      this.element.classList.remove("unchecked");
      this.element.classList.add("indeterminate");
    } else {
      this.element.classList.remove("indeterminate");
      this.element.classList.add("unchecked");
    }
  }
});
/* Termino - Implementação CheckBox */

var tbody = document.querySelector("tbody");
var btApagar = document.getElementById("btApagar");
var tmplLinha = document.getElementById("tmplLinha").content;
for (var indice = 0; indice < 20; indice++) {
  var linha = document.importNode(tmplLinha, true);
  linha.querySelector("div").id = "check" + indice;
  linha.querySelector("label").for = "check" + indice;
  linha.querySelector("label").textContent = "CheckBox " + indice;
  tbody.appendChild(linha);
}

var checkAll = new CheckBox(document.querySelector("div.checkbox.all"));
var checkItens = document.querySelectorAll("div.checkbox.item")
checkItens = [].map.call(checkItens, function (checkbox, indice) {
  return new CheckBox(checkbox);
});

var onAllClick = function (event, checkbox) {
  checkItens.forEach(function (checkItem, indice) {
    checkItem.checked = checkbox.checked;
  });
}

var onItemClick = function (event, checkbox) {
  var isChecked = function (checkItem, indice) {
    return checkItem.checked;
  };
  if (checkItens.every(isChecked)) {
    checkAll.checked = true;
  } else if (checkItens.some(isChecked)) {
    checkAll.indeterminate = true;
  } else {
    checkAll.checked = false;
  }
}

checkAll.addEventListener("click", onAllClick);
checkItens.forEach(function (checkbox, indice) {
  checkbox.addEventListener("click", onItemClick);
});

btApagar.addEventListener("click", function (event) {
  var selecionados = checkItens.filter(function(checkbox, indice) {
    return checkbox.checked;
  });
  if (selecionados.length > 0) {
    if (confirm('Deseja Apagar os ' + selecionados.length + ' CheckBoxes')) {
      selecionados.forEach(function(checkbox, indice) {
        var linha = checkbox.element.parentNode.parentNode;
        linha.parentNode.removeChild(linha);
        checkItens.splice(checkItens.indexOf(checkbox), 1);
      });
      console.log(checkItens);
      onItemClick();
    }  
  }
});

.checkbox {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-size: cover;
}

.checkbox.checked {
  background-image: url('http://cdn.flaticon.com/png/256/24385.png')
}

.checkbox.unchecked {
  background-image: url('http://cdn.flaticon.com/png/256/24396.png')
}

.checkbox.indeterminate {
  background-image: url('http://cdn.flaticon.com/png/256/24374.png')
}

<table>
  <thead>
    <tr>
      <th><div class="checkbox all"></div></th>
      <th><label for="checkAll">Selecionar Todos</label></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
    <td></td>
    <td><input id="btApagar" type="button" value="Apagar Selecionados" /></td>
  </tr>
  </tfoot>
</table>

<template id="tmplLinha">
  <tr>
    <td><div id="check" class="checkbox item"></div></td>
    <td><label for="check">CheckBox 01</label></td>
  </tr>
</template>

Answer 3

I was able to develop what I wanted:

    $(document).on("click", ".selectedMensagem", function(evt){
  var variavel = $(this).hasClass("selected");
  $("#barraDeleteMensagem").show();

  if(variavel){
    $(this).removeClass("selected");
    $(this).removeClass("ion-checkmark-round");
    auxiliar--;
  }else{
    $(this).addClass("selected");
    $(this).addClass("ion-checkmark-round");
    auxiliar++;
  }
  if(auxiliar <= 0){
    $("#barraDeleteMensagem").hide();
  }

  $("#numeroSelected").html(auxiliar + ((auxiliar == '1') ? " Selecionada" : " Selecionadas"));

});

When I click on div, he adds a classe selected, if the div already has the classe selected he removes, now just catch the ids of each div containing the class selected

Answer 4

You could do something like this:

$('#delete').click(function(){
    $('.classeSelecionada').remove();
});

When you click the delete button it removes all the elements that are with the "Selected" class enabled.