Question

I have a script that removes a class for functional reasons, the problem is it strips out all the classes and not just the one that it should.

HTML

  <ul id="slidecontrols" class="sc-nav">
  <li class="dont-remove">
     <a href="#one" class="user-management shadow1">User Management</a>
  </li>
  <li class="dont-remove">
    <a href="#two" class="asset-management shadow1">Asset Management</a>
  </li>
   <li class="dont-remove">
    <a href="#three" class="reporting shadow1">Reporting & Analytics</a>
  </li>
  </ul>

jQuery that is adding the class .selected and removing the class .selected with all the other classes that are on that “li” element.

$(document).ready(function () {

//Set the initial state: highlight the first button...
$('#slidecontrols').find('li:eq(0)').addClass('selected');

//and hide all slides except the first one
$('#slides').find('> div:eq(0)').nextAll().hide();

//actions that apply on click of any of the buttons
$('#slidecontrols li').click(function (event) {

    //turn off the link so it doesn't try to jump down the page
    event.preventDefault();

    //un-highlight the buttons
    $('#slidecontrols li').removeClass();

    //hide all the slides
    $('#slides > div').hide();

    //highlight the current button
    $(this).addClass('selected');

    //get the index of the current button...
    var index = $('#slidecontrols li').index(this);

    //and use that index to show the corresponding slide
    $('#slides > div:eq(' + index + ')').show();

});

});

< /script>

Answer 1

jsBin demo

Instead of:

$('#slidecontrols li').removeClass();

Use:

$('#slidecontrols li').removeClass('selected');