テーブル上の削除ボタンを押したときにfirestoreのデータも削除したい

Question

前提・実現したいこと

firestoreから取得したデータを元にHTMLに日時・出退勤時間をテーブルで表示しています。
先日ここで教えて頂いた方法で、テーブル上での削除はできるようになりました。
今回お助け頂きたいのは、テーブル上で削除したデータ(日付を基準)をfirestore上からも削除する方法です。
collection(userId).doc('2021-02-24')というようにドキュメントを直接指定すれば削除できることはわかっているのですが、jQueryで動的に作成されるテーブルデータの中から特定の行だけ削除したいと思うとさっぱりわからず途方に暮れています。
どなたかお助け頂けたら幸いです。

該当のソースコード

<h1>出退勤リスト</h1>
  <h2><span id="userNameArea"></span><span>さん</span></h2>
  
  <div class = "content">
      
      <table border="1"  id="tableMain">
        <thead>
          <tr>
            <th>日付</th>
            <th>出勤</th>
            <th>退勤</th>
            <th>削除</th>
          </tr>
        </thead>
        <tbody id="table"></tbody>
      </table>

      <script type="text/javascript">
  
        firebase.auth().onAuthStateChanged((user)=> {
         userName = user.displayName;

        var src = document.getElementById("userNameArea");
        src.innerHTML = userName
      
        database.collection(userId).get().then((snapshot)=>{
          snapshot.forEach((doc)=>{
        
          jQuery('#table').append('<tr id=rowId data-rowid="1"><td>'+ doc.data().outTimeValue + '</td><td>'+ doc.data().intime + '</td><td>'+ doc.data().outTime + '</td><td><input type="button" value="削除" class="deleteBtn" id="deleteBtnClick" ></td>')
          
        table.addEventListener ('click',({target:e})=> e.classList.contains ('deleteBtn') && e.closest ('tr').remove (), false)
    ↓追記
        document.getElementById("deleteBtnClick").onclick = function() {
        database.collection(userId).doc('#(rowId)').delete().then(function(){
          console.log("deleted");
        }).catch(function(error){
          console.error("error");
        });
      
        };
        
      });
      });
    });

    </script>

Comments

[hoshi-takanori]

EventListener の中で doc を使って削除すれば良いのでは。
(表示とは別にデータを持つ方が美しいとは思うけど、jQuery だと仕方がないのかなぁ…。)

[teddy1121]

hoshi-takanori様
回答ありがとうございます！
EventListenerの中でdocというのは
table.addEventListener ('click',({target:e})=> e.classList.contains ('deleteBtn') && e.closest ('tr').remove () && database.collection(userID).doc().delete(), false)
このようなものでしょうか？
これだとエラーは出ませんが動きませんT_T
見当違いだったらすみません！

[hoshi-takanori]

collection(userId).doc('2021-02-24') というデータ構造であれば、doc.id が '2021-02-24' とかになると思うので、削除はたぶん database.collection(userID).doc(doc.id).delete() かなぁ。(違ったらごめんなさい。)

[teddy1121]

質問を修正しました。
doc.idにしましたが消えませんT_T
エラーは出ないです。
HTML上の該当行は消えますがfirestoreは無反応という感じです。
お助けを！

[babu_babu_baboo]

あれほど外に出してって言ったのに…
なぜ削除する部分を中に入れた？

インデントがずれている
th の数と td の数が合ってない。
出社ではなく「出勤」＆「退勤」なのでは？
userName が表示されていなくて、そもそもの出勤表として成り立つのか？

その表には複数の名前とその一覧を表示するのか？
また後になって「実は・・・」がありそうなのだが？

受け取ったデータは保持する必要は無い。
テーブルをクリックした行から抜き出せばよい。
なので行またはテーブルに id を書き込んでおけばよい。

毎回 doc.data() を呼び出しているが相当無駄です。

[babu_babu_baboo]

id="deleteBtnClick" これ好きだよね～
id は、そのドキュメントの中で１つだけ使用できます。
提示されたコードだと、出勤レコードの数だけ同じ id が生まれてしまいます。
当然のごとく、削除する関数が同じ数だけ無駄にイベント登録も行われます

[teddy1121]

返信遅くなり申し訳ありません！
ご指摘頂いた部分、
・thの追加
・出勤・退勤へ変更
・ユーザー名の表示
・削除用コードを編集(追記部分)※反応しませんでした…
修正いたしました！
このページでは、別ページの出勤・退勤ボタンでfirestoreに日時を記録した上で、その記録の不要な日時を削除したです。
※理想では「編集」ボタンも付けてポップアップなどで直に修正できる機能もつけられたらいいのですが難しそうで手を出していません。なのでここでは削除だけし、別ページで出勤日時を作成できるようにしようかと思っています。
行にidを振ると教えて頂いたのですが、ここでいう「'<tr id=rowId data-rowid="1">」の部分の「rowId」になるのでしょうか？
tableには「tableMain」を振ってあるのですがこれを「doc('#(tableMain)')」としても動きませんでした。
ご教授をお願いします！

[babu_babu_baboo]

１つ訪ねたいのだけれど、
レコードの id って、doc.data().outTimeValue なの？
つまり　"2012-02-25" みたいな？

[teddy1121]

そうです！日付が入ります！
名前が変ですみません…

Answer 1

動くか？

<style>
#tableMain .template { display: none; }
.userName:after { content: "さん"; }

</style>

<h1>出退勤リスト</h1>
<h2><output class="userName"></output></h2>

<table border="1"  id="tableMain">
  <thead>
    <tr><th>日付 <th>出社 <th>退社 <th>削除

  <tbody>
    <tr class="template">
      <td>
        <input type="hidden" name="uid">
        <output name="outTimeValue" class="id">
      <td><input name="inTime">
      <td><input name="outTime">
      <td><input type="button" value="削除" class="deleteBtn">
</table>


<script>

const TB = document.getElementById ('tableMain');

firebase.auth().onAuthStateChanged((user)=> {
  document.querySelectorAll ('h2 ouput.userName')[0].textContent = user.displayName;

  database.collection(user.uid).get().then((snapshot)=>{
    let recs = snapshot.map (doc => Object.assign ({ }, user, doc.data ()));
    viewRecodes (TB, recs);
  });
});


function viewRecodes (root, recs) {
  const
    orign = root.querySelector ('.template'),
    template = orign.cloneNode (true),
    parent = orign.parentNode,
    targets = [...template.querySelectorAll ('*[name]')];
  
  template.classList.remove ('template');
  template.classList.add ('rec');

  for (let rec of recs) {
    for (let e of targets) {
      if (rec.hasOwnProperty (e.name))
        e.value = rec[e.name] || '';
    }
    parent.appendChild (template.cloneNode (true));
  }
}

function getRec (target) {
  return [...target.querySelectorAll ('*[name]')].reduce ((a, b)=> (a[b.name] = b.value, a), { });
}

function deleteRec (rec) {
  console.log(rec);
//  database.collection (rec.uid).doc (rec.outTimeValue).delete();
}

function updateRec (rec) {
  console.log (rec);
}

function deleteRow (target) {
  if (target) {
    deleteRec (getRec(target));
    target.remove ();
  }
}

function updateRow (target) {
  if (target)
    updateRec (getRec(target));
}


function handler (event) {
  let e = event.target;
  switch (event.type) {
  case 'click':
    if (e.classList.contains ('deleteBtn'))
      deleteRow (e.closest ('.rec'));
    break;
  case 'blur':
    updateRow (e.closest ('.rec'))
    break;
  }
}


TB.addEventListener ('click', handler, false);
TB.addEventListener ('blur', handler, true);

</script>

DOM構造を最初から構成するより、テンプレートをコピーして使っています。
編集されたくない場合は readOnly でもつけて切り替えてください
エラーが無いことを祈ります

--
イベントは個別に設定しない
「エリスの胸はパッド入り」のように復唱しましょう！
「イベント監視はお外から」

--
これを試してみる

firebase.auth().onAuthStateChanged((user)=> {
  document.querySelectorAll ('h2 ouput.userName')[0].textContent = user.displayName;

  database.collection(user.uid).get().then((snapshot)=>{
    let recs = [ ];
    snapshot.forEach (doc=>recs.push (Object.assign ({ }, user, doc.data ())));
    viewRecodes (TB, recs);
  });
});

試してみる２
id, uid を行に記録した。対応したIDを使って削除してみる
update も、もう可能じゃね？

      <td>
        <input type="hidden" name="uid">
        <input type="hidden" name="id">

firebase.auth().onAuthStateChanged((user)=> {
  document.querySelectorAll ('h2 ouput.userName')[0].textContent = user.displayName;

  database.collection(user.uid).get().then((snapshot)=>{
    let recs = [ ], u = { id: user.uid, displayName: user.displayName };
    snapshot.forEach (doc=>recs.push (Object.assign ({ }, u, doc.data ())));
    viewRecodes (TB, recs);
  });
});

Comments

[teddy1121]

回答ありがとうございます！
怖いのでそのまま<body></body>の間に張り付けたのですが、
subscribe.ts:239 TypeError: Cannot set property 'textContent' of undefined
at Object.next (timeEdit.html:59)
at subscribe.ts:104
at subscribe.ts:233
が出てしまいます。
どこかこちらの環境用に書き換える部分があるのでしょうか？
何度もすみません！

[babu_babu_baboo]

「あぁ～、そこがあれだからあれなんだよ。」

としか言えない。エスパーじゃないし。
だけどこうなるだろうな～とは思ってました。

プログラムを目で追い、解読してみましょう～！

[teddy1121]

アドバイスありがとうございます。
熱暴走しそうな頭で考えました。
先ほどのtextcontentの部分は「h2 ouput.userName」を「.userName」にすることで解決しました。
困ったのはsnapshot.mapです。
ここで「is not function」が発生し、いろいろググりましたがわかりませんでした。
タイプミスもなさそうだし、thenメソッドでsnapshotを呼び出しているから値も取れているのではないかと…
一度頭を冷やしてリトライしてみます！

[babu_babu_baboo]

snapshot は配列じゃないの？
console.log(snapshot) した結果が見たいのだけれど

フォーカスアウトすると登録変更もできるようにしたんだけどね…

[teddy1121]

og {_: sv, zf: Ov}
zf: Ov {_: vy, Id: kv, INTERNAL: {…}, md: K}
_: sv {zf: vy, Hf: Dv, ud: Mu, metadata: cv, query: Zp}
docs: (...)
empty: (...)
metadata: (...)
query: (...)
size: (...)
__proto__: Br
これで大丈夫ですか？

[teddy1121]

フィールドはこんな感じです。
date:"2021-02-25"
intime:"10:00"
name:"太郎"
outTime:"18:30"
outTimeValue:"2021-02-25"
uid:"N0hlreOF18QNO6Ah8AxqWyFwt3w2"

[teddy1121]

退勤してしまうので返信遅くなったらごめんなさい>人<

[babu_babu_baboo]

退社じゃないのね

[babu_babu_baboo]

user.uid と フィールドの uid がバッティングしていそう

[teddy1121]

退社・退勤…日本語難しい。。
エラーは出なくなりました！テーブル上では同じく選択したデータが消えています。
ですがfirestore側は反応がありません。
console.logにはちゃんと選択したデータが表示されています。
まだあまり手をつけずにコメントさせていただいていますが取り急ぎ報告させて頂きます。

[teddy1121]

同じくエラーは出ずテーブル上では消えます。logも出ます。
データベース側は消えないですT_T

Answer 2

以下の通り変更したら動きました。
$(function(){
$(document).on('click', '.deleteBtn', function() {
$(this).parents('tr').remove();//テーブルの行削除
var deleteDay = $(this).closest('tr').children("td")[0].innerText;//選択行の値を定義

        database.collection(userId).doc(deleteDay).delete()//定義された行の削除      
    });    
  })

色々教えてくださったbabu_babu_babooさんありがとうございました！