XiLab XiLab - 3 months ago 22
Javascript Question

JQuery toggle() append html element

I have multiple selection divs like cards. If one click on "select" then the title of that card is appended to the selection list.

My problem is the "unselect" button, which should instead remove the card title from the list. I've tried with

toggle()
append()
and
remove()
without success. Card Title is appended but not removed.



function accessories(){
var accessories;
$('.accessories').toggle(function() {

accessories = $(this).closest('.card').find('.image-title').text();
acc_txt = '<p> - ' + accessories + '</p>'; //element to append and remove later.
$('#selection').append(acc_txt);
$(this).css({background: '#35a8a5', border: '1px solid #35a8a5'});
$(this).val('Unselect');

}, function() {

$('#selection').remove(acc_txt);
$(this).css({background: '', border: ''});
$(this).val('Select');

});
}

jQuery(document).ready(function() {
accessories();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>

<div id="selection">here Should be appended the cards</div>





.accessories
is the class of the button inside the card. So I search for the title
.image-title
and I append it. There are multiple cards on the page.
I don't know though how could I make the unselect button works.
How can I achieve it?

Answer

Please check below snippet. Here I have replaced your toggle function with click function and using .each loop find out all the selected accessories on every click so only selected accessories will found. No need to remove un-selected accessories in this case.

$(document).ready(function(){
  $('.accessories').click(function() {     
    var current_status = $(this).val();
    if(current_status=='Select'){
      $(this).css({background: '#35a8a5', border: '1px solid #35a8a5'});
      $(this).val('Unselect');
    }else{
      $(this).css({background: '', border: ''});
      $(this).val('Select');
    }
    var accessories = "";
    $('.accessories[value="Unselect"]').each(function(){   
      var selection = $(this).closest('.card').find('.image-title').html();
      accessories += '<p> - ' + selection + '</p>';
    });
    $('#selection').html(accessories);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="selection">here Should be appended the cards</div><br/><br/>

<div class="col-sm-4 card">
  <div class="card-img">
    <img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
  </div>
  <h3 class="image-title text-center">Core Power Weighted Vest™</h3>
  <div class="image-desc">
    <p><strong>Available for all models.</strong></p>
    <p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
  </div>
  <input type="button" name="next" class="accessories" value="Select"/>
</div>

<div class="col-sm-4 card">
  <div class="card-img">
    <img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
  </div>
  <h3 class="image-title text-center">Core Power Weighted Vest™ - 1</h3>
  <div class="image-desc">
    <p><strong>Available for all models.</strong></p>
    <p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
  </div>
  <input type="button" name="next" class="accessories" value="Select"/>
</div>

<div class="col-sm-4 card">
  <div class="card-img">
    <img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
  </div>
  <h3 class="image-title text-center">Core Power Weighted Vest™ - 2</h3>
  <div class="image-desc">
    <p><strong>Available for all models.</strong></p>
    <p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
  </div>
  <input type="button" name="next" class="accessories" value="Select"/>
</div>


<div class="col-sm-4 card">
  <div class="card-img">
    <img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
  </div>
  <h3 class="image-title text-center">Core Power Weighted Vest™ - 3</h3>
  <div class="image-desc">
    <p><strong>Available for all models.</strong></p>
    <p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
  </div>
  <input type="button" name="next" class="accessories" value="Select"/>
</div>