クリックイベント 要素の表示、非表示の切り替えをしたい

Question

流れ

１、ダブルクリック　要素(テキストエリア)を３つ作成
２、テキストエリア右クリック　メニュー表示
３、メニュー　要素の選択をクリック
４、すべてのテキストエリアの左にチェックボックスが表示される

解決したいこと

上記の４番につきまして、
１度押すとチェックボックスが表れて、
２度押すとチェックボックスが(削除)される様にしたい。

toggleボタンの様にしようと思いましたが、createelmentを使用している為にそれができません。
毎回押す度にチェックボックス等が作成されてしまいます。
なのでテキストエリア以外の要素を、毎回作成したものを削除する形になると思います(div, input type=checkbox, input type=textNumber)
何か良い方法がありましたら是非ご教示ください。

宜しくお願い致します。

ソースコード：
https://codepen.io/mio-rei/pen/BapzePg

一部抜粋；

document.addEventListener('dblclick',(e)=>{   
  e.preventDefault();
  if(!e.target.closest('.nodoubleclick')){
    const textArea = document.createElement('textarea');
    document.querySelector('body').appendChild(textArea);

      
      document.querySelector('.elm').addEventListener('click',() => {
 
      const diClass = document.createElement('div');
      diClass.classList.add('di-class');


      const textNumber = document.createElement('input');
      textNumber.setAttribute('type', 'number');
      textNumber.classList.add('text-number');

      const ipClass = document.createElement('input');
      ipClass.setAttribute('type','checkbox');
      ipClass.classList.add('ip-class');
    
      document.querySelector('body').appendChild(diClass);
      diClass.style.backgroundColor = 'yellow';
      diClass.style.display = 'inline-block';
      diClass.appendChild(textNumber);
      diClass.appendChild(ipClass);
      diClass.appendChild(textArea);
      textNumber.style.display = 'none';
      

      const qa = document.querySelectorAll('.ip-class');
      let sizeUp = document.getElementById('sizeup');
      let sizeNum = document.getElementById('sizenum');
    
        sizeUp.onclick = () => {
          for (const test of qa) { 
            if(test.checked == true) {
              sizeNum.value = Number(sizeNum.value) + 1;
              test.nextElementSibling.style.fontSize = sizeNum.value + 'px';
            }
          }
        }
      });

Answer 1

チェックボックスが存在するかどうか確認して、存在すればそれを削除、存在しなければチェックボックスを追加する、という処理にすればいいでしょう。

自分がするなら、下記のような設計にします。
ダブルクリックでテキストボックスを追加するときに、チェックボックスも追加する（ただし、CSSで display: none で非表示にしておく）。
メニュー　要素の選択をクリックでは、.classList.toggle メソッドでクラスを追加/削除を切り替える。このクラスは display: block を設定しておく。