Jquery ile Nesnede ki Class’ı Silme

Bazen yaptığımız projelerde sayfamızda bir çok nesneye jquery ile dinamik olarak class’lar atamamız gerekebilir veya atadığımız bir class’ı nesneden kaldırmamız gerekebilir. İşte bu gibi durumlarda jquery ile çok basitçe yapabiliriz.

Örneğin sayfamızda 2 adet input text olsun. Bir tanesine tıkladığımız rengi değişsin, diğerine tıkladığımız ilk input’un rengi eski haline dönsün, ikinci input’un rengi değişsin.
Aşağıda ki örnekte “input_default” ve “input_selected” css class’larını kullandım.

Örneğin demosuna, makalenin altında yer alan “Demo” butonuna tıklayarak ulaşabilirsiniz.

<style type="text/css">
    .input_default{
        width: 300px;
    }
 
    .input_selected{
        width: 300px;
        background-color: orangered;
    }
</style>
  
İnput 1 = <input type="text" class="input_default" id="txt_input1">
  
İnput 2 = <input type="text" class="input_default" id="txt_input2">

Jquery tarafı ;

$('#txt_input1').click(function () {
    $('#txt_input1').addClass("input_selected");
    $('#txt_input1').removeClass("input_default");
    $('#txt_input2').addClass("input_default");
    $('#txt_input2').removeClass("input_selected");
});
 
 
$('#txt_input2').click(function () {
    $('#txt_input2').addClass("input_selected");
    $('#txt_input2').removeClass("input_default");
    $('#txt_input1').addClass("input_default");
    $('#txt_input1').removeClass("input_selected");
});