削除ボタンを押すと、非表示にした追加ボタンを再表示できるようにしたい

Question

３件名前とニックネームを登録すると追加ボタンが消えるように設定しています。
表にある削除ボタンを押して3件未満になったら追加ボタンを再表示できるようにしたいです。

現在は追加ボタンを押した数をカウントして、削除ボタンを押すとそのカウント数が1減るように。
そのカウント数が3以上になったら非表示に、3未満になったら表示するように記述しているのですが上手くいきません。

削除ボタンを押して追加ボタンを再表示させることまでは出来たのですが、再表示した後はまた追加ボタンを3回押さないと追加ボタンが消えないようになってしまいます。
削除ボタンを押すとカウント数がリセットされてるのでしょうか？

【html】

<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>    
      <table id="tourokuTable" table align = "center" table style = margin-top:50px>
        <tr>
            <th id="tableName">名前</th>
            <th id="tableNickname">ニックネーム</th> 
                   
        </tr>
     </table>

【js】

            let result = document.getElementById("result");
            let tuikanumber = 0;
            let tuikaBtn = document.getElementById("tuikaBtn");
                tuikaBtn.addEventListener('click',function() {
            let namae = document.getElementById("namae");
            let nickname = document.getElementById("nickname");
              
            
            if(namae.value == "" || nickname.value == "")return;
            
            let kakunin = window.confirm(
              namae.value + "さん" + nickname.value + "を登録します。よろしいですか？"
              );
           
            if(kakunin) {
              tuikanumber++;             
              window.alert(
              namae.value + "さん" + nickname.value + "にて登録しました。"
              ); 
              } else {
              return;
              }
            
            if(tuikanumber >= 3) {
              tuikaBtn.style.visibility = "hidden";           
            } 
            
            
            let formobject = document.getElementById("form-area");
            let tableobject = document.getElementById("tourokuTable");
            let tr = "<tr>";
              tr += "<td>" + formobject.namae.value + "</td>";
              tr += "<td>" + formobject.nickname.value + "</td>";
              tr += `<td><input type="button" value="削除" class="del"</td>`;
              tr += "</tr>";
              tableobject.insertAdjacentHTML( "beforeend", tr );
              
            document.addEventListener('click',e=>{
              let t=e.target;
              if(t.matches('.del')){
              t.closest('tr').remove();
              tuikanumber--;}
              if(tuikanumber < 3) {
                tuikaBtn.style.visibility = "visible";
              }
              
           
            });
           
            });

Comments

[yambejp]

前回の回答の調整版がまさにそれだと思うのですが、想定とどう違うのでしょうか？
https://teratail.com/questions/ht5pkmv83y5muv

[Hello.world]

なるべく自分の力、記述方法でやりたかったので。
申し訳ないです。。。

Answer 1

コードをきちんとインデントしましょう。それで気付く問題もあります。

現在のコードは以下のような構成になっています。

tuikaBtn.addEventListener('click',function() {
    ...
    tuikanumber++;             
    ...
    document.addEventListener('click',e=>{
        ...
        tuikanumber--;
        ...
    });
});

追加ボタンが押されるたびに削除ボタンのためのイベントリスナーが登録されています。追加ボタンを3回押してから削除ボタンを押すと、削除ボタンのイベントリスナーは1クリックで3回実行されてしまうのです。

document.addEventListener(...) を tuikaBtn.addEventListener(...) の外側に出しましょう。

Comments

[Hello.world]

なるほど！そういう事だったんですね
ありがとうございます！