title: adding and removing class by order
body: <p>I am trying to make a script where if the user presses 'J' in the browser, the 'li' will be selected and given a css class to show that it is selected.</p>
  
  <p>This is the code I have. </p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>    if (keyCode == 74) {
          if($('input').is(":focus")|| $('textarea').is(":focus")){
              return null;
          } else {
              e.preventDefault();
              if(! $('ul.question-list &gt; li').hasClass('selected-child')){
                  $('ul.question-list &gt; li.question:first-child').addClass('selected-child');
              } else { 
                  $('ul.question-list &gt; li.question.selected-child').next().addClass('selected-child');
              }
          }
      }
  </code></pre>
  
  <p>The problem I am having is that after the next li element has the class, the li before still has the <code>selected-child</code> class(obviously).</p>
  
  <p>How would I add to the script above to remove the <code>selected-child</code> from the li element before the new selected li?</p>