Викторина: как найти правильный ответ на DOM и спрятать его

Question

Я работаю над игрой в викторину, которая имитирует семейную вражду.У меня есть ввод, который вводит пользователь, и если один из трех ответов, отображаемых на странице, совпадает с вводом этого пользователя, игрок получает очки, и ответ удаляется из массива, и тот же ответ должен исчезнуть.

Хотя он работает функционально в javascript, мне нужно добавить стилизацию, чтобы удалить любой правильный ответ.

Короче говоря, в настоящее время я могу сопоставить правильный объект ответа на странице в соответствии с тем, что ввел пользователь.Как мне теперь получить доступ к этому же объекту в DOM и скрыть его содержимое?

Спасибо!

• нет серверной части
• ответы хранятся в массиве объектовв js-файле
• с использованием JQuery

edit: поскольку меня распяли, спрашивая, как можно реализовать это через jquery, я решил вместо этого использовать функцию.

correctAnswer - это передаваемый объект.

  revealCorrectAnswer(correctAnswer) {
    $(".answer").each(function() {
      if ($(this).text() === correctAnswer.answer) {
        $(this).addClass("hidden");
        $(this)
          .parent()
          .next()
          .children()
          .addClass("hidden");
      }
    });
  }

<section class="question-section">
        <h2 id="current-question">Question Goes Here</h2>
</section>
<section class="answers-section">
    <article class="answer-section" id="section-1">
        <div>
            <h1 class="answer answer-1">answer1</h1>
        </div>
        <div class="pts-section">
            <p class="answer-1-pts">50</p>
        </div>
    </article>
    <article class="answer answer-section" id="section-2">
        <div>
            <h1 class="answer-2">answer2</h1>
        </div>
        <div class="pts-section">
            <p class="answer-2-pts">75</p>
        </div>
    </article>
    <article class="answer answer-section" id="section-3">
        <div>
            <h1 class="answer-3">answer3</h1>
        </div>
        <div class="pts-section">
            <p class="answer answer-3-pts">100</p>
        </div>
    </article>
</section>

<section class="whose-turn">
    <form class="whose-turn-form">
        <p class="current-turn"></p>
        <label for="player-guess">
            <input type="input" class="player-guess" id="player-guess" name="player-guess" placeholder="Make a guess!">
        </label>
        <button type="submit" class="btn submit-answer" id="submit-guess" name="submit-guess">Guess</button>
    </form>
</section>

$("#submit-guess").on("click", event => {
  event.preventDefault();

  if (game.currentRound < 3) {
    game.whoseTurn();

    //let player 1 guess first
    if (game.currentPlayerTurn === "player1") {
      rotatePlayer(player2);
      checkInputOf(player1);
      updateTheScoreOf(player1, 1);
    } else if (game.currentPlayerTurn === "player2") {
      rotatePlayer(player1);
      checkInputOf(player2);
      updateTheScoreOf(player2, 2);
    }
  } else if (game.currentRound < 5) {
    if (game.currentPlayerTurn === "player2") {
      checkInputOf(player1);
      updateTheScoreOf(player1, 1);
    } else if (game.currentPlayerTurn === "player1") {
      checkInputOf(player2);
      updateTheScoreOf(player2, 2);
    }
  } else {
    console.log("|| Exceeds Rounds ||");
  }

  function rotatePlayer(player) {
    $(".current-turn").html(`${player.name}'s turn!`);
  }

  function checkInputOf(player) {
    let userInput = $("#player-guess").val();
    player.score += game.checkUserGuess(userInput, game.currentAnswers);
  }

  function updateTheScoreOf(player, domElementId) {
    $(`.player-${domElementId}-score`).html(`Score: ${player.score}`);
  }
});