画像をremoveChildするとエラーがでます

前提・実現したいこと

JavaScriptでボタンを押したら画像が追加され、画像の数が３つより大きくなったら画像を消すという処理です。
意図した挙動にはなるのですが、エラーがでます。
https://developer.mozilla.org/ja/docs/Web/API/Node/removeChild
上記のMDNサイトにはエラーが出ると書いてあります。挙動は問題ないのですが、エラーが出たままでもよいのでしょうか？

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

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
    at HTMLButtonElement.<anonymous>

該当のソースコード

JavaScript
1<body>
2  <button class="button">ボタン</button>
3  <div class="imgArea"></div>
4<script>
5
6document.querySelector('.button').addEventListener('click',() => {
7  let imgElement = document.createElement('img');
8  imgElement.src = 'images/画像ファイル.png';
9
10  let imgArea = document.querySelector('.imgArea');
11  imgArea.appendChild(imgElement);
12
13  let cnt = document.images.length;
14  // console.log(cnt);
15
16  while (cnt > 3) {
17    imgArea.removeChild(imgArea.firstChild);
18  }
19});
20
21</script>
22</body>
23

試したこと

下記のコードも同じ挙動をするのですが、同じエラーが出てしまいます。

javascript
1while (cnt > 3) {
2  imgArea.removeChild(imgArea.childNodes.item(0));
3}

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答3件

whileの中でcntは不変なので無限ループですね。
3を越えた場合にどうしたいのでしょうか？

越えた分だけ消して3個にしたいなら、

JavaScript
1  let cnt = document.images.length;
2  while (cnt > 3) {
3    imgArea.removeChild(imgArea.firstChild);
4    cnt = document.images.length;
5  }

です。

投稿2021/06/03 12:27

otn

総合スコア85901

退会済みユーザー

2021/06/03 13:00

ご回答ありがとうございます。

行動規範の内容に同意します

ベストアンサー

4個になったら1個消すのか、全部消すのかわかりません

javascript
1while (cnt > 3) {
2↓↓↓
3if(document.images.length > 3) {

もしくは

  if(document.querySelectorAll('img').length>3){
    while(img=document.querySelector('img')) {
      img.remove();
    }
  }

投稿2021/06/03 12:27

編集2021/06/03 12:29

yambejp

総合スコア116734

退会済みユーザー

2021/06/03 12:58

ご回答ありがとうございます。4個になったら全部消して、また１から増えていくという処理でした。おかげさまでエラーはなくなりました。ありがとうございます。

行動規範の内容に同意します

js
1while (cnt > 3) {
2  imgArea.removeChild(imgArea.firstChild);
3}

whileループ中でcntは変化しませんから、これは無限ループを意味するコードです。TypeError が出ているおかげで無限ループにならずに停止しています。ループ中、imgAreaの子ノードをすべて削除した後はimgArea.firstChildがnullになるので、TypeErrorになります。

投稿2021/06/03 12:25