how to remove an append

Asked

Viewed 1,184 times

2

would like to know how do I remove only the append which has been cleared by checkbox, for in my code when I select a certaincheckbox he adds a append of a img and when I click on it again it removes this append, but if I add some append when I cancel one checkbox regardless of where I click to uncheck it removes all append which were added, I would like to remove only what was clicked someone could 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

1 answer

0


EDIT:

As this adding several elements they may not have the same ID, use the class to identify them, and to remove do the search in the same Parent that 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>

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

  • when I try to implement this code snippet it starts to remove as if it were a queue no matter where I click the checkbox it always removes the first one after the second one and so on

  • @Leonardocosta as you did not include an excerpt of html with your checkboxes could not determine how its structure is, it is likely that the .index() is getting 0 (zero) on all of them, so you need to use another way to relate the created element to the checkbox. paste in your question an html snippet with at least 3 checkboxes.

  • added the html snippet

  • @Leonardocosta the answer was edited...

  • thanks now it worked

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.