JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='style.css'></head>
  <body>
    <header>
      <h1>My List</h1>
    </header>
        <input id='texto-tarefa' type="text"/>
        <button id='criar-tarefa' type="submit" onClick='click()'>Add</button>
        <ol id='lista-tarefas'> 
        </ol>
        <button id='remover-selecionado' type="submit" onClick='removeSelected()'>Remove Selected (Only One)</button>
        <script src="script.js"></script>
  </body>
</html>

CSS

.lista:focus{
  background:red;
}

JavaScript

const textoTarefa = document.getElementById('texto-tarefa');
const criarTarefa = document.getElementById('criar-tarefa');
const listaTarefas = document.getElementById('lista-tarefas');
criarTarefa.onclick = function click() {
  const lista = document.createElement('li');
  lista.className = 'lista';
  lista.id = 'lista';
  lista.tabIndex = '0';
  lista.innerHTML = textoTarefa.value;
  listaTarefas.appendChild(lista);
  document.body.appendChild(listaTarefas);
  textoTarefa.value = '';
};
const completedLine = document.querySelector('ol');
function umClick(event) {
  if (event.target.tagName === 'LI') {
    const listas = document.querySelectorAll('.lista');
    listas.forEach((i) => {
      i.addEventListener('click', function semNomeDois() {
        listas.forEach((j) => j.classList.remove('selected'));
        this.classList.add('selected');
      });
    });
  }
}
completedLine.addEventListener('click', umClick);
function removeSelected() {
  // teste
  const listaSelected = document.querySelectorAll('.selected');
  for (let i = 0; i < listaSelected.length; i += 1) {
    listaSelected[i].remove();
  }
}