Skip to main content
adicionou 2051 caracteres ao conteúdo
Fonte Link
Leonardo Costa
  • 1mil
  • 13
  • 32

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>

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>
Fonte Link
Leonardo Costa
  • 1mil
  • 13
  • 32

como remover um append

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

          
        });