Catch Divs with certain class

Asked

Viewed 1,102 times

0

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

javascript jquery
  • 4

    Can you explain in other words what you explained in the first paragraph? It’s not very clear to me.

  • 1

    Even after your dit this sentence doesn’t make sense to me: "he add to this div a class "selecionado" right after virify which ones are in the DOM as divs which contains this class."

  • I made a project in Jsfiddle to better visualize. When the guy clicks on the div whose class is selectedMensagem he must add a new class to is div and search in the gift, for all div that has the class, (this serves for me to change the appearance of div, so that it looks like a select) After this, I need to get the ID, because all this, is for me to delete the selected messages. I could understand more ?

  • Do you want to click on a div that contains a Hidden inside? That’s what I’m reading in your code?

  • Actually it is a select system, so that all that are selected I have ID and can delete.

  • @Rboschini Yes, in him all the magic will happen.

  • The principle is a CHECK BOX, which you can select several, and then you can check where there are checked box and delete them.

  • puts onClick on that Hidden, for the user to click on it.

  • But what I need is not onClick, because the click works, I need logic, how to do it !

  • @Sergio Entendeu ?

  • @Renanrodrigues to be honest no. It may be because I speak pt_PT. Review the first paragraph and try to clarify. I’m happy to help, but I need to understand the problem first.

  • @Sergio I tried to be as explanatory as I said think about the principle of check box adding the class checked at the check box

  • @Renanrodrigues, if maybe it is better you leave for a custom checkbox, take a look at this link Quick Tip: Easy CSS3 Checkboxes and Radio Buttons

Show 8 more comments

4 answers

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/

1

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>

0


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

-1

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.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.