Adding and removing items from cart

July 16, 2022

Here’s the code:

$(".cart_item").on("click", function() {
  
  $(this).toggleClass("selected");
  
  if ($(this).hasClass("selected")) {
  
  let prodItemName = $(this).find(".cart_item_title").text();
  let prodItem = `<div class="cart_item--selected">${prodItemName}</div>`
  $("#cart").append(prodItem);
  } else {
    $(this).parents(".cart").find(".cart_item--selected").remove();
  }
});

* {
  max-width: 100%;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: monospace;
  font-weight: 500;
  font-size: 2em;
}

.cart {
  width: 100%;
  padding: 60px;
}

.cart_items {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding-bottom: 1em;
}

.cart_item {
  flex: 1 1 20%;
  white-space: nowrap;
  cursor: pointer;
}

.cart_item.selected {
  filter: blur(1px) brightness(0.5);
}

.cart_item_image {
  width: 200px;
  min-width: 200px;
  height: 200px;
  overflow: hidden;
}

.cart_item_title {
  padding-top: .5em;
  padding-bottom: .5em;
}

.cart_items--selected {
  font-size: .7em;
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  gap: 1rem;
  margin-bottom: 2em;
}

.cart_item--selected {
  border-radius: 4px;
  background: #e7e7e7;
  padding: 6px 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="cart">
    <div id="cart" class="cart_items--selected">
      
    </div>
    
    <div class="cart_items">
      <div class="cart_item" product-id="0">
        <div class="cart_item_image">
        <img src="https://images.unsplash.com/photo-1657925182169-c6f935c72667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="girl"></div>
        
        <div class="cart_item_title">
        Product 1
        </div>
      </div>
      <div class="cart_item" product-id="1">
        <div class="cart_item_image">
        <img src="https://images.unsplash.com/photo-1657925182169-c6f935c72667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="girl"></div>
        
        <div class="cart_item_title">
        Product 2
        </div>
      </div>
      <div class="cart_item" product-id="2">
        <div class="cart_item_image">
        <img src="https://images.unsplash.com/photo-1657925182169-c6f935c72667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="girl"></div>
        
        <div class="cart_item_title">
        Product 3
        </div>
      </div>
      <div class="cart_item" product-id="3">
        <div class="cart_item_image">
        <img src="https://images.unsplash.com/photo-1657925182169-c6f935c72667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="girl"></div>
        
        <div class="cart_item_title">
        Product 4
        </div>
      </div>
      <div class="cart_item" product-id="4">
        <div class="cart_item_image">
        <img src="https://images.unsplash.com/photo-1657925182169-c6f935c72667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="girl"></div>
        
        <div class="cart_item_title">
        Product 5
        </div>
      </div>
    </div>
  </div>
</body>

Here’s the problem:

Items appear in #cart by toggling cart_item blocks. I’d like to know, how to remove selected blocks titles from #cart accordingly.

Can it be done by copying attributes accordingly? If so, then how can it be done?

Sadly, I’m an absolute newbie to JQuery and JS

Thanks a lot for your help!

>Solution :

use valid HTML5 attributes: data-product-id
use that same attribute (like: data-product-id="2") for new #card items DIVs
remove the element which attribute matches the data-product-id value

Example:

$(".cart_item").on("click", function() {

  $(this).toggleClass("selected");

  const prodItemName = $(this).find(".cart_item_title").text();
  const prodId = $(this).data("product-id");

  if ($(this).hasClass("selected")) {
    const prodItem = `<div data-product-id="${prodId}" class="cart_item--selected">${prodItemName}</div>`
    $("#cart").append(prodItem);
  } else {
    $("#cart").find(`[data-product-id="${prodId}"]`).remove();
  }
});

* {
  max-width: 100%;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: monospace;
  font-weight: 500;
  font-size: 2em;
}

.cart {
  width: 100%;
  padding: 60px;
}

.cart_items {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding-bottom: 1em;
}

.cart_item {
  flex: 1 1 20%;
  white-space: nowrap;
  cursor: pointer;
}

.cart_item.selected {
  filter: blur(1px) brightness(0.5);
}

.cart_item_image {
  width: 200px;
  min-width: 200px;
  height: 200px;
  overflow: hidden;
}

.cart_item_title {
  padding-top: .5em;
  padding-bottom: .5em;
}

.cart_items--selected {
  font-size: .7em;
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  gap: 1rem;
  margin-bottom: 2em;
}

.cart_item--selected {
  border-radius: 4px;
  background: #e7e7e7;
  padding: 6px 8px;
}

<div class="cart">
  <div id="cart" class="cart_items--selected"></div>

  <div class="cart_items">
    <div class="cart_item" data-product-id="0">
      <div class="cart_item_image">
        <img src="https://images.unsplash.com/photo-1657925182169-c6f935c72667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="girl"></div>

      <div class="cart_item_title">
        Product 1
      </div>
    </div>
    <div class="cart_item" data-product-id="1">
      <div class="cart_item_image">
        <img src="https://images.unsplash.com/photo-1657925182169-c6f935c72667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="girl"></div>

      <div class="cart_item_title">
        Product 2
      </div>
    </div>
    <div class="cart_item" product-id="2">
      <div class="cart_item_image">
        <img src="https://images.unsplash.com/photo-1657925182169-c6f935c72667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="girl"></div>

      <div class="cart_item_title">
        Product 3
      </div>
    </div>
    <div class="cart_item" data-product-id="3">
      <div class="cart_item_image">
        <img src="https://images.unsplash.com/photo-1657925182169-c6f935c72667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="girl"></div>

      <div class="cart_item_title">
        Product 4
      </div>
    </div>
    <div class="cart_item" data-product-id="4">
      <div class="cart_item_image">
        <img src="https://images.unsplash.com/photo-1657925182169-c6f935c72667?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="girl"></div>

      <div class="cart_item_title">
        Product 5
      </div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>