how to remove an append

Question

how to remove an append

Navigation

#1 by (0 votes)

2

I would like to know how to remove only the append that was cleared by checkbox , because in my code when I select a certain checkbox it adds a append of a img and when I click again on it it removes this append , however if I add several append when I go to uncheck a checkbox regardless of where I click to uncheck it removes all append that were added, I'd like to remove it only what was clicked could someone help me?

code:

$('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();

            }



        });

html code:

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

javascript jquery

asked by anonymous 19.10.2016 / 23:00

1 answer

java library error in project Inheritance problem with HIBERNATE

score 0 · Accepted Answer

EDIT:

Since you are adding multiple elements, they can not have the same ID, use the class to identify them, and to remove the search in the same parent as it was previously added ...

$('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><divclass="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>