2

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>

1 Resposta 1

0

EDIT:

Como esta adicionando vários elementos eles não podem ter o mesmo ID, utilize a class para identifica-los, e para remover faça a busca no mesmo parent em que foi adicionado anteriormente...

$('input[type="checkbox"]').on('change', function() {
  var $parent = $(this).parents('.hovereffect');
  if (this.checked) {
    $('.abcd', $parent).append('<img class="hea img-responsive" src="../images/heart.png">');
  } else {
    $('.hea', $parent).remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

5
  • quando tento implementar esse trecho de codigo ele comeca a remover como se fosse uma fila nao importa onde eu clique no checkbox ele remove sempre o primeiro depois o segundo e assim sucessivamente Commented 20/10/2016 às 1:30
  • @LeonardoCosta como você não incluiu um trecho de html com suas checkboxes não consegui determinar como é sua estrutura, é provável que o .index() esteja ficando 0 (zero) em todas elas, então você precisa utilizar outra forma de relacionar o elemento criado com o checkbox. cole na sua pergunta um trecho de html com pelo menos 3 checkboxes. Commented 20/10/2016 às 10:12
  • adicionei o trecho em html Commented 20/10/2016 às 14:43
  • @LeonardoCosta a resposta foi editada... Commented 20/10/2016 às 15:59
  • obrigado agora funcionou Commented 20/10/2016 às 18:25

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 .