refactor(guess-the-word): use better supported method to remove children elements

Author: Hdoc1509

vanilla/guess-the-word/src/events/handlers/difficulty-complete.js

@@ -33,8 +33,7 @@ export function handleDifficultyComplete() {
     import("@/ui/insane-countdown-bar").then(({ hideInsaneCountdown }) =>
       hideInsaneCountdown(),
     );
-  // TODO: use a while loop
-  $typing.replaceChildren();
+  while ($typing.firstChild != null) $typing.removeChild($typing.firstChild);
   $typing.classList.add(CLASSES.HIDDEN);
 
   showCompletedDifficultyMessage(difficulty, { allCompleted: gameCompleted });

vanilla/guess-the-word/src/ui/hints/clear.js

@@ -1,7 +1,8 @@
 import { $allHintsList, $correctHintsList } from "./elements";
 
 export const clearHints = () => {
-  // TODO: use a while loop
-  $allHintsList.replaceChildren();
-  $correctHintsList.replaceChildren();
+  while ($allHintsList.firstChild != null)
+    $allHintsList.removeChild($allHintsList.firstChild);
+  while ($correctHintsList.firstChild != null)
+    $correctHintsList.removeChild($correctHintsList.firstChild);
 };

vanilla/guess-the-word/src/ui/typing/letter-fields.js

@@ -12,8 +12,7 @@ const $letterFields = [];
 /** @param {number} quantity */
 export function createLetterFields(quantity) {
   $letterFields.length = 0;
-  // TODO: use a while loop
-  $typing.replaceChildren();
+  while ($typing.firstChild != null) $typing.removeChild($typing.firstChild);
 
   for (let idx = 0; idx < quantity; idx++) {
     const $letterClone = /** @type {DocumentFragment} */ (

vanilla/guess-the-word/src/ui/word.js

@@ -15,8 +15,7 @@ const lettersToUse = [""];
 
 /** @param {string} word */
 export const createWordLetters = (word) => {
-  // TODO: use a while loop
-  $word.replaceChildren();
+  while ($word.firstChild != null) $word.removeChild($word.firstChild);
   $wordLetters.length = 0;
   lettersToUse.length = 0;