feat(guess-the-word): add util to remove children elements

Author: Hdoc1509

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

@@ -3,6 +3,7 @@ import { difficulty } from "@/state/difficulty";
 import { AvailableWords } from "@/state/words";
 import { MasterDifficulty } from "@/utils/difficulty/master";
 import { InsaneDifficulty } from "@/utils/difficulty/insane";
+import { clearChildren } from "@/utils/dom";
 import { createWordLetters } from "@/ui/word";
 import { $triesContainer } from "@/ui/tries";
 import { $mistakesContainer } from "@/ui/mistakes";
@@ -33,7 +34,7 @@ export function handleDifficultyComplete() {
     import("@/ui/insane-countdown-bar").then(({ hideInsaneCountdown }) =>
       hideInsaneCountdown(),
     );
-  while ($typing.firstChild != null) $typing.removeChild($typing.firstChild);
+  clearChildren($typing);
   $typing.classList.add(CLASSES.HIDDEN);
 
   showCompletedDifficultyMessage(difficulty, { allCompleted: gameCompleted });

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

@@ -1,8 +1,6 @@
+import { clearChildren } from "@/utils/dom";
 import { $allHintsList, $correctHintsList } from "./elements";
 
 export const clearHints = () => {
-  while ($allHintsList.firstChild != null)
-    $allHintsList.removeChild($allHintsList.firstChild);
-  while ($correctHintsList.firstChild != null)
-    $correctHintsList.removeChild($correctHintsList.firstChild);
+  clearChildren($allHintsList, $correctHintsList);
 };

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

@@ -1,5 +1,6 @@
 import { getElementById, getElementBySelector } from "@lib/dom";
 import { TypingLetterIndex } from "@/state/typing-letter";
+import { clearChildren } from "@/utils/dom";
 import { createLetterLabel } from "./letter-label";
 import { $typing } from "./elements";
 import { CLASSES } from "@/consts/css-classes";
@@ -12,7 +13,7 @@ const $letterFields = [];
 /** @param {number} quantity */
 export function createLetterFields(quantity) {
   $letterFields.length = 0;
-  while ($typing.firstChild != null) $typing.removeChild($typing.firstChild);
+  clearChildren($typing);
 
   for (let idx = 0; idx < quantity; idx++) {
     const $letterClone = /** @type {DocumentFragment} */ (

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

@@ -1,5 +1,6 @@
 import { getElementById } from "@lib/dom";
 import { currentWord } from "@/state/current-word";
+import { clearChildren } from "@/utils/dom";
 
 const ATTRIBUTRES = Object.freeze({
   LETTER: Object.freeze({
@@ -15,7 +16,7 @@ const lettersToUse = [""];
 
 /** @param {string} word */
 export const createWordLetters = (word) => {
-  while ($word.firstChild != null) $word.removeChild($word.firstChild);
+  clearChildren($word);
   $wordLetters.length = 0;
   lettersToUse.length = 0;
 

vanilla/guess-the-word/src/utils/dom.js

@@ -0,0 +1,6 @@
+/** @param {HTMLElement[]} $elements */
+export const clearChildren = (...$elements) => {
+  for (const $element of $elements)
+    while ($element.firstChild != null)
+      $element.removeChild($element.firstChild);
+};