データを3件入力して追加ボタンを消すようにしたが、削除ボタンでデータが削除され3件未満になった場合は追加ボタンを再表示させ、3件になるまで追加し直せるようにしたい

プログラミング初学者です。
javascriptを学習しています。
前回はテーブルを作成して、データを3件登録して追加ボタンを消すようにしましたが、削除ボタンでデータが削除され3件未満になった場合は追加ボタンを再表示させ、3件になるまで追加し直せるようにしたいです。
ご教示よろしくお願いいたします。

HTML
```<!DOCTYPE html>
<html>
    <head>
        <title>アカウント登録</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
    <body>
        <div class="base container">
          <div class="row">
            <h1>アカウント登録</h1>
          </div>
          <div class="row">
            <div class="card" id="card">
              <div class="card-block">
                <form id="form-area" class="form-inline" method="post">
                    <div class="form-group">
                        <div class="input-group">
                          <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
                        </div>
                    </div>

                    <div class="form-group">
                      <input id="tuikaBtn" type="button" name="touroku" value="追加">
                    </div>

                </form>
                <div id="tuikaMoto">

                </div>
                <div id="result"></div>
              </div>
            </div>
          </div>  
        </div>
      </div>
      <div id="overLay">
      </div>

------javascript------
<script>
  let tuikaTimes = 0;
  let result = document.getElementById('result');
  tuikaBtn.addEventListener('click', function () {
  let namae = document.getElementById("namae");
  let nickname = document.getElementById("nickname");

  if( namae.value===""||nickname.value==="") {
      return false;
  }
  if(!window.confirm(namae.value + 'さん' + nickname.value + 'を登録します。よろしいですか？')) {
    return false;
  }

  
  
  alert(namae.value + 'さん' + nickname.value + 'にて登録しました。');

  tuikaTimes++;
                
  if(tuikaTimes >= 3) {
  let hyoji = document.getElementById("tuikaBtn");
  hyoji.style.visibility="hidden";
  return false;
  }    
  });

  window.addEventListener('DOMContentLoaded', ()=>{
  tuikaBtn.addEventListener('click',()=>{
  let tbl=result.querySelector('table');
  if(!tbl){
  tbl=document.createElement('table');
  result.appendChild(tbl);
  }
  const v1=namae.value;
  const v2=nickname.value;
  if(v1 && v2){
  const tr=[v1,v2].reduce((x,y)=>(x.appendChild(Object.assign(document.createElement('td'),{textContent:y})),x),document.createElement('tr'));
  tr.appendChild(Object.assign(document.createElement('input'),{type:'button',value:'削除',className:'del'}));
  tbl.appendChild(tr);
  namae.value='';
  nickname.value='';
  }
  });
  });

  document.addEventListener('click',e=>{
  if(e.target.matches('.del')){
  e.target.closest('tr').remove();
  }
  });


        </script>
    </body>
</html>

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

回答1件

ベストアンサー

普通にカウンタを減らせばいいのでは。

js
1			tuikaTimes--;
2
3			if (tuikaTimes < 3) {
4				let hyoji = document.getElementById("tuikaBtn");
5				hyoji.style.visibility = "";
6			}

投稿2022/05/30 01:55

Lhankor_Mhy

総合スコア37421

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

データを3件入力して追加ボタンを消すようにしたが、削除ボタンでデータが削除され3件未満になった場合は追加ボタンを再表示させ、3件になるまで追加し直せるようにしたい

関連した質問