[Résolu] Retirer une classe quand tel item est retiré de l'input

J'ai réussi à mettre en forme les lettres d'un tableau au fur et à mesure que je les tape dans un champ de saisie (input) en leur affectant une classe

  <table class="boggle">
      <tbody>
        <tr>
          <td id="P">P</td>
          <td id="A">A</td>
          <td id="S">S</td>
          <td id="G">G</td>
        </tr>
        <tr>
          <td id="Q">Q</td>
          <td id="O">O</td>
          <td id="B">B</td>
          <td id="E">E</td>
        </tr>
        <tr>
          <td id="D">D</td>
          <td id="L">L</td>
          <td id="C">C</td>
          <td id="M">M</td>
        </tr>
        <tr>
          <td id="N">N</td>
          <td id="J">J</td>
          <td id="T">T</td>
          <td id="V">V</td>
        </tr>

      </tbody>
    </table>
    <form action="play.php" method="post">
      <input type="text" name="mot" id="mot" maxlength="30" autocomplete="off" autofocus="" onkeypress="whichCharIsIt(event);" placeholder="mot">
      <input type="submit" name="ok" value="ok" id="envoimot">
    </form>

table.boggle td.lettreselectionnee {
      background-color: #ECB445;
    }

      function whichCharIsIt(event) {
        var keynum;
        var tirage = "<?php echo $tirage ?>";  // "A;E;I;G;L;M...."(str)
        var tiragetab = tirage.split(";"); // crée un tableau avec tirage

        // identifier le caractère tapé
        if(window.event) { // IE
          keynum = event.keyCode;
        } else if(event.which){ // Netscape/Firefox/Opera
          keynum = event.which;
        }
        var caracteresaisi = String.fromCharCode(keynum).toUpperCase(); // renvoie le caractère tapé
        var searchcar = tiragetab.indexOf(caracteresaisi); // renvoie l'indice du caractère tapé dans le tableau tiragetab

        var caracteresaisigrille = document.getElementById(caracteresaisi);
        caracteresaisigrille.classList.add("lettreselectionnee");
      }

Mais je ne parviens pas à supprimer ladite classe (caracteresaisigrille.classList.remove("lettreselectionnee");, certes) au fur et à mesure que j'efface les lettres à coup de backspace ou de delete dans l'input.

Comment puis-je faire, selon vous ?

Quelle est la meilleure technique ?
Je capitalise dans un tableau stocké en local ce qui est tapé au fur et à mesure et je remove la classe des items que je pop,
- ou bien -
j'ai la possibilité d'identifier la lettre effacée ?
parce que KeyboardEvent, il peut juste me dire que j'ai appuyé sur backspace ou delete, à mon sens

Dans l'un ou l'autre cas, je n'y parviens pas...
Y a-t-il quelqu'un parmi vous qui peut me donner un coup de pouce, svp ?

Merci d'avance !
Modifié par Reka (20 Jan 2019 - 22:02)

Bonjour,

Quand tu détectes un backspace ou un delete, tu peux par exemple regarder quelles sont les lettres qui ont la classe "lettreselectionnee" (en utilisant document.getElementsByClassName par exemple qui va te donner la liste des éléméents ayant cette classe, et pour chaque élément, tu regardes ce qu'il y a dans leur innerHTML : ce sont les lettres déjà sélectionnées). Puis pour chacune de ces lettres, tu regardes si elles sont aussi dans l'input. Tu finiras par en trouver une qui n'y est pas et tu lui retires sa classe.

Algo de base !

Amicalement,

Merci Parsimonhi, je vais tenter de faire comme ça.
J'imaginais qu'il y avait plus simple, mais le principal est qu'il n'y ait rien d'insurmontable.
Algo de base, comme tu dis

Bonjour,

5 à 10 lignes de code maxi : tu devrais y arriver

Amicalement,