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 determinado`checkbox` 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>