Skip to main content
adicionou 1221 caracteres ao conteúdo
Fonte Link

Você precisa relacionar cada item adicionado ao seu "criador", fiz isso usando o child index do checkbox, concatenando no ID do elemento adicionado, (a proposito nunca se deveEDIT:

Como esta adicionando vários elementos eles não podem ter mais de um elemento com o mesmo id)ID, depoisutilize a class para identifica-los, e para remover faz a seleção usandofaça a mesma formabusca no mesmo parent em que foi adicionado anteriormente...

$('input[type="checkbox"]').on('change', function() {
  if (this.checked) {
 var $parent = $(this).closestparents('.hovereffect').find;
  if ('this.abcd'checked).append('<img id="hea'{
 +   $(this'.abcd', $parent).indexappend() +'<img '"class="hea class="imgimg-responsive" src="../images/heart.png">');
  } else {
    $('#hea' + $(this)'.index()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">
  <input type="checkbox"> <span class="abcd"></span>
  <input type="checkbox"> <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">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">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="abcd">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>

Você precisa relacionar cada item adicionado ao seu "criador", fiz isso usando o child index do checkbox, concatenando no ID do elemento adicionado, (a proposito nunca se deve ter mais de um elemento com o mesmo id), depois para remover faz a seleção usando a mesma forma.

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

<div class="hovereffect">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <div class="abcd">
  </div>
</div>

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

Você precisa relacionar cada item adicionado ao seu "criador", fiz isso usando o child index do checkbox, concatenando no ID do elemento adicionado, (a proposito nunca se deve ter mais de um elemento com o mesmo id), depois para remover faz a seleção usando a mesma forma.

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

<div class="hovereffect">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <div class="abcd">
  </div>
</div>