生成したインスタンスを削除したい

Question

前提・実現したいこと

javaScriptで数字の書かれたパネル(li要素)を順番にクリックするゲームを作っています。
select要素でレベルを選択すると、現在表示されているパネルをいったん削除し、新しくレベルに応じたパネルを生成したい。

発生している問題・エラーメッセージ

レベルを変更すると、現在表示されているパネルが削除されず、パネルが追加される。
（例）レベル２からレベル３に変更すると、（２のパネル数）＋（３のパネル数）が表示される

該当のソースコード

'use strict';

{
  class Panel {
    constructor(game) {
      this.game = game;
      this.el = document.createElement('li');
      this.el.classList.add('pressed');
      this.el.addEventListener('click', () => {
        this.check();   
      });
    }

    getEl() {
      return this.el;
    }

    activate(num) {
      this.el.classList.remove('pressed');
      this.el.textContent = num;
    }

    check() {
      if (this.game.getCurrentNum() === parseInt(this.el.textContent, 10)) {
        this.el.classList.add('pressed');
        this.game.addCurrentNum();
        if (this.game.getCurrentNum() === this.game.getLevel() ** 2) {
          clearTimeout(this.game.getTimeoutId());
        }
      }
    }
  }

  class Board {
    constructor(game) {
      this.game = game;
      this.panels = [];
      for (let i = 0; i < this.game.getLevel() ** 2; i++) {
        this.panels.push(new Panel(this.game));
      }
      this.setup();
    }

    setup() {
      const board = document.getElementById('board');
      this.panels.forEach(panel => {
        board.appendChild(panel.getEl());
      });
    }

    activate() {
      const nums = [];
      for (let i = 0; i < this.game.getLevel() ** 2; i++) {
        nums.push(i);
      }

      this.panels.forEach(panel => {
        const num = nums.splice(Math.floor(Math.random() * nums.length), 1)[0];
        panel.activate(num);
      });
    }
  }

  class Game {
    constructor(level) {
      this.level = level;
      this.board = new Board(this);

      this.currentNum = undefined;
      this.startTime = undefined;
      this.timeoutId = undefined;

      this.getLevel();
    
      const btn = document.getElementById('btn');
      btn.addEventListener('click', () => {
        this.start();
      });
      this.setup();
    }

    setup() {
      const container = document.getElementById('container');
      const PANEL_WIDTH = 50;
      const BOARD_PADDING = 10;
      /* 50px * 2 + 10px * 2 */
      container.style.width = PANEL_WIDTH * this.level + BOARD_PADDING * 2 + 'px';
    }

    start() {
      if (typeof this.timeoutId !== 'undefined') {
        clearTimeout(this.timeoutId);
      }
  
      this.currentNum = 0;
      this.board.activate();
  
      this.startTime = Date.now();
      this.runTimer();
    }

    runTimer() {
      const timer = document.getElementById('timer');
      timer.textContent = ((Date.now() - this.startTime) / 1000).toFixed(2);
  
      this.timeoutId = setTimeout(() => {
        this.runTimer();
      }, 10);
    }

    addCurrentNum() {
      this.currentNum++;
    }

    getCurrentNum() {
      return this.currentNum;
    }

    getTimeoutId() {
      return this.timeoutId;
    }

    getLevel() {
      return this.level;
    }

    
  }
  

  // 最初に表示される
  new Game(2);

  // selectから要素を取得し新たにパネルを生成
  const level = document.getElementById('level');
  level.addEventListener('change', () => {
    new Game(level.value);
  });

}

試したこと

changeイベントの最初に、new Game(0);やnew Game(undefined);を挿入（何も変わらず）
同じ個所に、new Panel();にも同様の引数を入れて書いたが機能せず。

補足情報（FW/ツールのバージョンなど）

初心者なためわかりずらくてすみません。
ブラウザ　chrome
エディター　VSCode
フレームワーク　未使用

Answer 1

生成したインスタンスを削除したい

インスタンスの削除は インスタンスを格納する変数など（配列要素やオブジェクトの属性値）に null を与えてガベージコレクタ が専有していたメモリ領域を開放するように実装にします。
変数等に新しいインスタンスを代入する方法もあります。
配列であれば、shift() や pop()、添字指定で上書き、ary.length = 0 などもインスタンスの削除（メモリ開放）手段となります。

ご質問のコードにある、new 演算子でインスタンス生成する場合、必ず変数を用意するなど、インスタンスの管理が重要になります。

レベルを変更すると、現在表示されているパネルが削除されず、パネルが追加される。

appendChild() がインスタンスを文書木上に保持する処理なので、removeChild() を使って明示的に削除してください。

Board クラス で panels プロパティまで設定して管理しているにもかかわらず、単純に push する実装だからでしょう。

index 指定して明示的に上書きするとともに、document のツリーにある内容も明示的に削除する必要があるのではないでしょうか。

Comments

[mintia191]

ご返答ありがとうございます。
removeChild()を使って、Board クラスのsetup()に以下を挿入し、パネルを削除し追加することができました。
while (board.firstChild) {
board.removeChild(board.firstChild);
}
ですが、PanelクラスのclearTimeoutが機能せず、タイマーが止まらなくなってしまいました。
教えてくださったことをいろいろ試行錯誤したのですが、どうやってもうまくいきません。
もしよろしければ、少し具体的に教えていただくことはできないでしょうか。
よろしくお願い致します。

[AkitoshiManabe]

> 少し具体的に教えていただくことはできないでしょうか
clearTimeout() の前にインスタンスを削除したのが原因だとは思いますが、
再現できる内容ではありませんでしたので、具体的に答えるのは無理です。
本題「生成したインスタンスを削除」には回答したつもりです。

[mintia191]

仰る通りです。
申し訳ございませんでした。
ご返答頂きありがとうございました。