Jacob Seen Jacob Seen - 7 months ago 9
PHP Question

JavaScript - removeClass from matching img title?

I am making new question thread, because I wasn't clear and I agree with that.

So, I have clickable

item-cards
, if you click on one the class name changes to
selected
and it also adds the item which you click on to the
cart
. Each cart item has
X
behind, if you click it, it will remove the item from the cart, but it doesn't remove the
selected
part. If I added there that it would remove that class, then it removed it from all items. Example, if I add 2 items in cart and I deleted one from the cart, then it removed the
selected
class from all, but how could I make it so it would only removes it from, which has same img title? Here are some examples:

Selected Item HTML

<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="2761454276">
<div class="iteam" style="text-decoration: underline;text-align: left">Butterfly Knife | Crimson Web</div>
<div class="condition" style="text-align: left;text-size:13px">Field Tested</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">BitSkins Price: $110.52 (You save: $-39.06)</div>
<div class="buyer-price center-align">$149.58</div>
</div>
</div>
</div>




Code, if you click on X

$("#itemcart span").click(function() {
$(this).parent().remove()


Code how X is being added

$("#itemcart div").each(function(){
if( $(this).children().length > 0){

} else{
$(this).append($("<span> X</span>"));
}
});


Clicking on item-card

$(".item-card").click(function() {
var itemnume = $(this).find("img").attr("title");
var replaced = itemnume.split(' ').join('_');
replaced = replaced.split('(').join('');
replaced = replaced.split(')').join('');
replaced = replaced.split('|').join('');

if ($(this).hasClass('selected-item')) {
$("#" + replaced).last().remove();
} else {
$("#itemcart").append($("<div id=" + replaced + ">" + itemnume + "</div>"));
$("#itemcart div").each(function(){
if( $(this).children().length > 0){

} else{
$(this).append($("<span> X</span>"));
}
});

$("#itemcart span").click(function() {
$(this).parent().remove()
$(".item-card").removeClass("red lighten-1 white-text selected-item");
calculateTotal();
});
}
$(this).toggleClass("red lighten-1 white-text selected-item");

calculateTotal();
});

Answer

Try this, save selected item in data and get it on click:

$(".item-card").click(function() {
   var itemnume = $(this).find("img").attr("title");
   var replaced = itemnume.split(' ').join('_');
   replaced = replaced.split('(').join('');
   replaced = replaced.split(')').join('');
   replaced = replaced.split('|').join('');

   if ($(this).hasClass('selected-item')) {
       $("#" + replaced).last().remove();
   } else {
    var cart_item = $("<div id=" + replaced + ">" + itemnume + "</div>");
    $("#itemcart").append(cart_item);
    $("#itemcart div").each(function(){
    if( $(this).children().length > 0){

    } else{
    $(this).append($("<span> X</span>"));
    }
    });
    var self = $(this);
    cart_item.on('click', 'span', function() {
        $(this).parent().remove()
        self.removeClass("red lighten-1 white-text selected-item");
        calculateTotal();
    });
   }
   $(this).toggleClass("red lighten-1 white-text selected-item");

   calculateTotal();
});
Comments