Add Items in the product category page

I have come across this page per the following link.  A button "Add to List" is at the right side of the image. When the user clicks Add to the list button, it will be added to the My List.

The button turns to Remove from the list once Add to List has been clicked.  How to accomplish it? Thank you!
Rabbit WAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
Please try to describe more what you want and update the link since it will lead us always to "The page cannot be found." message.

Rabbit WAuthor Commented:
Per the attached images, when the user clicks Add to List button, the image is added to my list. When clicking  my list link, the added image is displayed. After the user adds the image to my list, the button has been changed to remove from list.
Zakaria AcharkiAnalyst DeveloperCommented:
That could be achieved using some CSS code and jQuery logic by attaching a click event to the button and toggling the class remove-from-list :

$('.add-remove-btn').click(function() {
  if ($(this).hasClass('remove-from-list')) {
    $(this).text("Add to List");
  } else {
    $(this).text("Remove from List");

Open in new window

Working live fiddle
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

Rabbit WAuthor Commented:
You are my hero! Could you give me the complete example including adding to the list? Thank you!
Rabbit WAuthor Commented:
Hi Zakaria, I might miss the js file. What is <script type="text/javascript" src="xxx.js"></script> in the head?
Thank you!
How to add the items to the list and then remove these from the list?

Thank you!
Zakaria AcharkiAnalyst DeveloperCommented:
Hi Rabbit,

Here we go, here's a sample that you could start from :


$(function() {
  $('.add-remove-btn').on('click', function() {
    var elm_identitfier= $(this).data('identitfier');

    if ( $(this).hasClass('remove-from-list') ) 
          $(this).removeClass('remove-from-list').text("Add to List");
          $('#products-box .product-'+elm_identitfier).parent().remove();
    } else {
          $(this).addClass('remove-from-list').text("Remove from List");
          $('#products-box').append('<div class="image-container col-xs-3">'+$('.product-' + elm_identitfier)[0].outerHTML+'</div>');

    $('#products-number').text(  $('#products-box div').length );

  $('i.toolbar-trigger').on('click', function() {
    var operator = $(this).hasClass('fa-arrow-up')?'+':'-';

    $(this).toggleClass('fa-arrow-up fa-arrow-down');
    $('#products-list').animate({ bottom: operator + "=130px"  });

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rabbit WAuthor Commented:
Thank you very much Zakaria! Is there any way to remove the images from the list as well when the item list number decreased? Thank you!
Zakaria AcharkiAnalyst DeveloperCommented:
You're welcome, not sure what you mean by when the item list number decreased?
Rabbit WAuthor Commented:
Remove the images from the list.
Zakaria AcharkiAnalyst DeveloperCommented:
Isn't the image remove already working when you click "Remove from List"? on you mean adding a sort of button inside the "My list" area that removes every image?
Rabbit WAuthor Commented:
Sorry, I just updated my css file and now I can see the images now.  Thank you!
Zakaria AcharkiAnalyst DeveloperCommented:
No worries, glad I could help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.