How to add class onClick and remove class

Question

This title has been all ready asked, but my problem is different than other topics.

I have an function what generates my div:

function createInventory(response)
{
  var trHTML = '';
  $.each(response, function (i, item) {
    //console.log(item.name+": "+item.quantity);
    if(item.quantity==null)
    {
      item.quantity="";
    }
    trHTML+='<div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used'+i+'">'+item.name+"<br>"+item.quantity+'<div class="itemoption"><button  id="sell-'+i+'" onclick="sellItem(this.id)" type="button">Sell</button><button id="info'+i+'">Info</button></div></div>';
  });
  $('.inventory-items').html(trHTML);

}

In html it should be like this:

.inventory
{
  position: relative;
  top:60%;
  left:50%;
  width:400px;
  height:600px;
}

.inventory-items
{
  width:100%;
  height: 80%;
  background: black;
}

.inven-free
{
  width:24.5%;
  height: 24.5%;
  border:1px solid white;
  float:left;

}

#slot-used
{


}

#sellquantity
{
  width:140px;
  height: 80px;
  background-color: white;
  border:1px solid black;

}

.inventory-head
{
  width:100%;
  background-color: green;
  height: 5%;
  position: relative;
}

<div class="inventory">
   <div class="inventory-head"><input id=""><button>Sell</button></div>
   <div class="inventory-items">
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used1" class="active">
         Soff<br>29
         <div class="itemoption"><button id="sell-1" onclick="sellItem(this.id)" type="button">Sell</button><button id="info1">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used2" class="active">
         Clean-water<br>316
         <div class="itemoption"><button id="sell-2" onclick="sellItem(this.id)" type="button">Sell</button><button id="info2">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used3">
         Dirty-water<br>127
         <div class="itemoption"><button id="sell-3" onclick="sellItem(this.id)" type="button">Sell</button><button id="info3">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used4">
         Saaremaa<br>49
         <div class="itemoption"><button id="sell-4" onclick="sellItem(this.id)" type="button">Sell</button><button id="info4">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used5" class="active">
         Glamur<br>6
         <div class="itemoption"><button id="sell-5" onclick="sellItem(this.id)" type="button">Sell</button><button id="info5">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used6">
         Laudur<br>25
         <div class="itemoption"><button id="sell-6" onclick="sellItem(this.id)" type="button">Sell</button><button id="info6">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used7">
         Lurker<br>
         <div class="itemoption"><button id="sell-7" onclick="sellItem(this.id)" type="button">Sell</button><button id="info7">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used8">
         Obi<br>
         <div class="itemoption"><button id="sell-8" onclick="sellItem(this.id)" type="button">Sell</button><button id="info8">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used9">
         Savage<br>
         <div class="itemoption"><button id="sell-9" onclick="sellItem(this.id)" type="button">Sell</button><button id="info9">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used10">
         Savage<br>
         <div class="itemoption"><button id="sell-10" onclick="sellItem(this.id)" type="button">Sell</button><button id="info10">Info</button></div>
      </div>
      <div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used11">
         Savage<br>
         <div class="itemoption"><button id="sell-11" onclick="sellItem(this.id)" type="button">Sell</button><button id="info11">Info</button></div>
      </div>
      <div class="inven-free" id="slot-free  0">test</div>
      <div class="inven-free" id="slot-free  1">test</div>
      <div class="inven-free" id="slot-free  2">test</div>
      <div class="inven-free" id="slot-free  3">test</div>
      <div class="inven-free" id="slot-free  4">test</div>
   </div>
</div>

I'm using onclick to know what id number I have on different boxes.

I want to add class to selected box(when selected by sell button). Now my problem is that I cant remove class from older clicked ids. They all get active class what were/is clicked, but I dont want that, I want only the clicked one to have active class and if new one is click it should remove last one.

Anyways my function is here how I'm adding classes atm:

function sellItem(clicked_id)
{
  var trHTML = '';
  var id=clicked_id.split("-")[1];

  $("#slot-used"+id).removeClass('active')
  $("#slot-used"+id).addClass('active')
  $("#slot-used"+id).toggleClass('active');

    trHTML+='<input id=""><button>Sell</button>';
    $(".inventory-head").html(trHTML);
}

Answer 1

There are several improvements you can do you to your code:

1 - Remove you inline styles from your dynamic html. So from this

trHTML+='<div style="width:24.5%;height: 24.5%;border:1px solid red;float:left;color:white;" id="slot-used'+i+'">'+item.name+"<br>"+item.quantity+'<div class="itemoption"><button id="sell-'+i+'" onclick="sellItem(this.id)" type="button">Sell</button><button id="info'+i+'">Info</button></div></div>';

To this

.itemContainer {
    width:24.5%;
    height: 24.5%;
    border:1px solid red;
    float:left;
    color:white;
}

trHtml += '<div class="itemContainer" id="slot-used'+i+'">'+item.name+"<br>"+item.quantity+'<div class="itemoption"><button class="sellButton" id="sell-'+i+'" type="button">Sell</button><button id="info'+i+'">Info</button></div></div>';

2- Remove your click from your inline html, that's really fragile, mostly because you're using dynamic content and enumeration could be out of sync. (Already done on the top html)

3-Add the onclick behavior on as delegates, so the wire up is totally content agnostic (and could work for dynamic content), and use the tagged classes for the button (already added one) and the new .itemContainer. Use closest to find the right container

$(document).ready(function () {
   $(".inventory-items").delegate("button.sellButton", "click", function(e) {
     $(".itemContainer").removeClass("active");
     $(this).closest(".itemContainer").addClass("active");
   });

});

No more splitting ids. That code will found the right div and mark it as active.

Hope this helps. Regards

Answer 2

Looks like you have some decent answers already, but here's my 2 cents for a potentially much more simple answer:

var item;

function onClickMethod(e) {
    if ( item ) {
        item.removeClass('active');
    }

    item = $(e.target);

    item.addClass('active');
};

$('slotItemsorWhatever').click(onClickMethod)

Answer 3

Under .inventory-items you have all the box. So you can simply use below selector to point active box & then just remove that class.

  $(".inventory-items .active").removeClass('active');

Your function should be like this:

 function sellItem(clicked_id)
{
  var trHTML = '';
  var id=clicked_id.split("-")[1];

  $(".inventory-items .active").removeClass('active');
  $("#slot-used"+id).addClass('active');

  trHTML+='<input id=""><button>Sell</button>';
  $(".inventory-head").html(trHTML);
}

Above will remove active from current clicked element. If want toggle effect then you need to use .not() selector.

function sellItem(clicked_id)
{
  var trHTML = '';
  var id=clicked_id.split("-")[1];

  $(".inventory-items .active").not("#slot-used"+id).removeClass('active');
  $("#slot-used"+id).toggleClass('active');

  trHTML+='<input id=""><button>Sell</button>';
  $(".inventory-head").html(trHTML);
}

Answer 4

Add a class to all slots/boxes, for example class="handle" id="slot-used2"

Then onClick, before selecting a slot/box, deselect all slots/boxes that have the class: 'handle'

$(".handle").removeClass('active');
$("#slot-used"+id).addClass('active');

If you have hundreds of thousands of slots/boxes and concerned about doing removeClass() on all of them blindly then you can modify the code slightly to be more precise like this:

$(".handle.active").removeClass('active');
$("#slot-used"+id).addClass('active');