gostaria de saber como faço para remover somente o append
que foi desmarcado pelo checkbox
, pois em meu código quando eu seleciono um determinadocheckbox
ele adiciona um append
de uma img
e quando eu clicar novamente nele ele remove este append
, porem se eu adicionar varios append
quando eu for desmarcar um checkbox
independente de onde eu clicar pra desmarcar ele remove todos os append
que foram adicionados, eu gostaria que remove-se somente o que foi clicado alguém poderia me ajudar?
código:
$('input[type="checkbox"]').on('change', function() {
var checkk = $(this).val();
if(checkk == "nao-checado"){
// adiciona o value de checado e adiciona o append
$(this).val("checado");
if($(this.checked)){
$(this).closest('.hovereffect').find('.abcd').append('<img id="hea" class="img-responsive" src="../images/heart.png">');
return;
}
}else{
// se ja estiver checado eu removo o valor quando clicado novamente e volto ao valor padrao
$(this).val("nao-checado");
$(".hovereffect img:last-child").remove();
}
});
codigo html:
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<span class="abcd"></span>
<img id="he" class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary cke">
<input type="checkbox" value="nao"><i class="fa fa-heart"></i>
</label>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<span class="abcd"></span>
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary cke">
<input type="checkbox" value="nao"><i class="fa fa-heart"></i>
</label>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<span class="abcd"></span>
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary cke">
<input type="checkbox" value="nao"><i class="fa fa-heart"></i>
</label>
</div>
</div>
</div>
</div>