0

Preciso fazer um sistema para deletar mensagens, estas mensagens são colocadas dentro de div's, onde eu divido como o html logo abaixo. Como no check box existe um local para o click, eu separei uma div que irá simular a movimentação de um click, quando clicar nesta div ela deve mudar de aparência, para que fica evidenciado que aquela div está marcada. Em um outro momento preciso de um botão deletar mensagem, que irá varrer o DOM atrás de divs com a determinada classe adicionada.

Exemplo: Tenho a DIV-A, dentro tem varias outras divs inclusive a DIV-MARQUE, ao clicar nesta DIV-MARQUE, preciso que uma classe seja adicionado a ela, informando que ela está "selecionada". Ao clicar em um BOTAO-DELETE, preciso de uma função que varra as DIVs da pagina atrás da classe informada.

Preciso então resumindo de duas coiasas

1° - Ao clicar na DIV adicionar uma classe 'x' á ela.

2° - Ao clicar no botão "delete" preciso pegar os ID's localizado dentro das div selecionada com a classe 'x'

Abaixo meu HTML montado dinamicamente:

+' <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>';

A ideia é eu clicar no selectedMensagem, ele guardar o id, contido no idMenssagem e fazer o que eu descrevi na mensagem acima.

Agradeço desde já.

Projeto JSFiddle

13
  • 4
    Podes explicar com outras palavras o que explicaste no primeiro parágrafo? Não está muito claro para mim.
    – Sergio
    Commented 5/01/2016 às 17:05
  • 1
    Mesmo depois do teu edit esta frase não me faz sentido: "ele adicione a está div uma classe "selecionado" logo após virificar quais sãos no DOM as divs que contem está classe."
    – Sergio
    Commented 5/01/2016 às 17:12
  • Fiz um projeto no JSFiddle para melhor visualizar. Quando o cara clicar na div cuja classe é selectedMensagem ele deve adicionar uma nova classe a está div e pesquisar no dom, por todas as div que tem a classe, (isso serve para mim mudar a aparência da div, para que fique semelhante a um select) Apos isto, preciso pegar o ID, porque tudo isto, é para que eu delete as mensagens selecionadas. Deu pra entender mais ? Commented 5/01/2016 às 17:12
  • Você quer clicar em uma div que contem um hidden dentro? é isso mesmo que eu estou lendo no seu codigo?
    – RBoschini
    Commented 5/01/2016 às 17:13
  • Na verdade é um sistema de select, para que todas que estejam selecionadas tenho ID e posso deletar. Commented 5/01/2016 às 17:13

4 Respostas 4

1

Acredito que isso atenda sua necessidade:

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

Exemplo Funcionando: https://jsfiddle.net/cztrvq66/11/

1

realmente não entendi o seu problema, se ele está em manipular uma div para que a mesma se comporte como um checkbox, ou em identificar o estado da div/checkbox.

Quanto a personalizar a div, aconselho que faça uma Objeto que controle quando adicionar ou remover as classes de estilo e exponha as propriedades checked e indeterminate.

a ideia aqui é ter algo como:

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;

a ideia é que você possa trabalhar com a div.checkbox da mesma forma que você trabalha com uma checkbox... segue a implementação:

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

O exemplo acima, estou a realizar um alert sempre que o valor do checkbox é alterado.

agora um exemplo mais complexo, como 20 CheckBoxes mais 1 que permite selecionar ou remover a seleção de todos... assim como um button para realizar a remoção dos selecionados.

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

Consegui desenvolver o que queria:

    $(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"));

});

Quando clico na div, ele adiciona uma classe selected, se caso a div ja tiver a classe selected ele remove, agora basta pegar os ids de cada div que contem a classe selected

-1

Você poderia fazer alguma coisa parecida com isso:

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

Quando clicar no botão de deletar ele remove todos os elementos que estão com a classe "Selecionada" ativados.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .