Как удалить второй класс у DOM элемента?

const el = document.querySelector('#curr'); 
el.classList.remove(el.classList.item(1)); 
 
console.log(el.className);

<div class="info"> 
  <i id="curr" class="first second third"></i> 
</div>

console.log(classSplice('#curr', 1, 2, 'foo', 'bar')); 
 
function classSplice(selector, ...args) { 
  const el = document.querySelector(selector); 
  if (!el) return; 
  const classes = el.className.split(/\s+/); 
  classes.splice(...args); 
  return (el.className = classes.join(' ')); 
}

<div class="info"> 
  <i id="curr" class="first second third fourth"></i> 
</div>

var classList = document.getElementById('curr').className.split(/\s+/); 
document.getElementById('curr').className = classList[0];

.first{ 
  background-color: red; 
} 
.second{ 
  border-radius: 50px; 
}

<div class="info"> 
 <i id="curr" class="first second" style = "width: 50px; height: 50px; position: absolute"></i> 
</div>

function removeClass(position) { 
  const element = document.getElementById('curr'); 
  removeClassOnPosition(element, position); 
  showCurrentClasses(element); 
} 
 
function removeClassOnPosition(element, position = 0, count = 1) { 
  var classList = Array.from(document.getElementById('curr').classList); 
  classList.splice(position, count); 
  document.getElementById('curr').className = classList.join(' '); 
} 
 
function showCurrentClasses(element) { 
  currentClasses.textContent = element.classList; 
} 
 
showCurrentClasses(document.getElementById('curr'));

.first { 
  background-color: red; 
} 
 
.second { 
  border-radius: 50px; 
} 
 
.third { 
  color: white; 
}

<div class="info"> 
  <div id="curr" class="first second third" style="width: 50px; height: 50px">text</div> 
</div> 
<div id="currentClasses"></div> 
<button onclick="removeClass(1)">remove second class</button>