How to remove a class from curren and add it to next

by Heshan Kithuldora

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
          <li class="visited">one</li>
          <li><em>two</em></li>
          <li><em>tree</em></li>
          <li><em>four</em></li>
          
</ol>	


<div id="next"> next</div>

CSS

.visited{ color:red}
.notvisityet{ color:blue;}

JavaScript

$(document).ready(function(e) {
$(".visited").next().children('em').addClass('notvisityet');
});

$('#next').click(function(){
	$(".visited").next().addClass('visited');
  if(!$('ol li:last-child').prev().hasClass('visited')){
    $(".visited").children('em').removeClass('notvisityet');
    $(".visited").nextAll().eq(1) .children('em').addClass('notvisityet');
  }
  else if($('ol li:last-child').hasClass('visited')){
  	$('ol li:last-child').children('em').removeClass('notvisityet');
  }
	else{
  	$(".visited").children('em').removeClass('notvisityet');
    $('ol li:last-child').children('em').addClass('notvisityet');
  }
});