特定の投稿IDを削除するにはどうすればよいですか？

Question

私の間違いのため申し訳ありませんが、私はかなりスタックオーバーフローで投稿するのが新しいです。うまくいけば私は十分な情報を提供しました。理論的には、行を削除して（その部分を削除して）対応するID（-KiN ...）を削除するCancelを押しています。

テーブルの最初のレコードでキャンセルをクリックすると、データベースの最初のレコードが削除されますが、最後のレコードをクリックしても最初のレコードは削除されます。だから私は、テーブルのキャンセルボタンに対応する予約を取り消すことに問題があります。

https://jsfiddle.net/1s1h67u1/

https://i.stack.imgur.com/Uy0uK.png

var resvbTabRef = firebase.database().ref("Reservation/user") 
resvbTabRef.on('child_added', function(snapshot) { 
    var user = firebase.auth().currentUser; 
    var specialKey = snapshot.key; 
    var fullName = snapshot.val().Name; 
    var phnNum = snapshot.val().Phone_Number; 
    var ResvUID = snapshot.val().uid; 
    var ResvDate = snapshot.val().Reservation_Date; 
    var NumPeopl = snapshot.val().Number_of_Guests; 
    var ResvEmail = snapshot.val().Email; 

    var ResvInfo = fullName + phnNum + ResvDate + NumPeopl + ResvUID + ResvEmail 

    if (user.uid == ResvUID) { 
    var resvData = ('<tr><td ="' + specialKey + '">' + specialKey + '</td><td>' + fullName + '</td><td>' + user.email + '</td><td>' + phnNum + '</td><td>' + ResvDate + '</td><td>' + NumPeopl + '</td><td>' + '<button type="button" class="btn btn-default btn-sm" data-key=' + ResvInfo.key + ' id="cancelResv"><span class="glyphicon glyphicon-remove"></span> Cancel</button>' + '</td></tr>') 
    $("#userResvTable").append(resvData); 

    } else { 
    console.log("error"); 
    } 


$('#userResvTable').on('click', 'button[type="button"]', function(snapshot) { 
    $(this).closest('tr').remove(); 
    var resvbTabRef = firebase.database().ref("Reservation/user/") 
    resvbTabRef.once("value") 
     .then(function(snapshot) { 
     snapshot.forEach(function(childSnapshot) { 

      var key = childSnapshot.key; 
      var childData = childSnapshot.val(); 
      var ref = firebase.database().ref("Reservation/user/" + key) 
      return ref.remove().then(function() { 
      console.log('OK, gone'); 
      console.log(childData) 
      }).catch(function(e) { 
      console.log('OOPS, problem:' + e.message); 

      }) 

      childSnapshot.ref.remove(); 
      //        console.log(resTab) 
     }) 
     }) 

Answer 1

私はテーブルを作り直すことで問題を解決することができました。クリックされたキャンセルボタンに対応するポストキーが最初のセルに配置されているセルを検索する。そのセルを見つけた後、変数を割り当て、その変数をキーの代わりに.child（x）で呼び出しました。私はClimb Treeに手伝ってくれてありがとう。

var resvbTabRef = firebase.database().ref("Reservation/user") 
    resvbTabRef.on('child_added', function(snapshot) { 
     var user = firebase.auth().currentUser; 
     var specialKey = snapshot.key; 
     var fullName = snapshot.val().Name; 
     var phnNum = snapshot.val().Phone_Number; 
     var ResvUID = snapshot.val().uid; 
     var ResvDate = snapshot.val().Reservation_Date; 
     var NumPeopl = snapshot.val().Number_of_Guests; 
     var ResvEmail = snapshot.val().Email; 
     var btn = "<button id='cancel' class='cancel'>Cancel</button>" 
     var ResvInfo = fullName + phnNum + ResvDate + NumPeopl + ResvUID + ResvEmail 
      //Only show users reservations if it equals their uid 
     if (user.uid == ResvUID) { 
      var table = document.getElementById("tablebody-reservation"); 
      var i = 1; 
      //Grab snapshot of firebase  
      createTable(); 
      // console.log(document.getElementById("tablebody-reservation").rows[0].cells.item(0).textContent); 
      function createTable() { 
       var resvbTabRef = firebase.database().ref("Reservation/user/"); 
       resvbTabRef.once('value', function(snapshot) { 

        var row = table.insertRow(0); 
        var cell1 = row.insertCell(0); 
        var cell2 = row.insertCell(1); 
        var cell3 = row.insertCell(2); 
        var cell4 = row.insertCell(3); 
        var cell5 = row.insertCell(4); 
        var cell6 = row.insertCell(5); 
        var cell7 = row.insertCell(6); 

        cell1.innerHTML = specialKey; 
        cell1.className = "UID"; 
        cell2.innerHTML = fullName; 
        cell2.className = "FullName"; 
        cell3.innerHTML = ResvEmail; 
        cell3.className = "Email"; 
        cell4.innerHTML = phnNum; 
        cell4.className = "Phone"; 
        cell5.innerHTML = ResvDate; 
        cell5.className = "Date"; 
        cell6.innerHTML = NumPeopl; 
        cell6.className = "People"; 
        cell7.innerHTML = btn; 

        var a = document.getElementsByClassName('cancel'); 
        for (var i = 0; i < a.length; i++) { 
         a[i].addEventListener('click', function() { 
          var b = this.parentNode.parentNode.cells[0].textContent; 
          console.log(b); 
          CancelButton(b); 
         }) 
        } 
       }) 
      } 
      function CancelButton(b) { 
       $(this).closest('tr').remove(); 
       console.log(specialKey) 
       var resvbTabRef = firebase.database().ref("Reservation/user/") 
       resvbTabRef.once("value") 
        .then(function(snapshot) { 
         snapshot.forEach(function(childSnapshot, uid) { 
          var key = childSnapshot.key; 
          var childData = childSnapshot.val(); 
          var ref = firebase.database().ref("Reservation/user/").child(b); 
          console.log(ref) 
          return ref.remove().then(function() { 
           console.log('OK, gone'); 
           console.log(childData); 
           location.reload(); 
          }).catch(function(e) { 
           console.log('OOPS, problem:' + e.message); 
          }) 
         }) 
        }) 
      } 
     } 
    }) 

Answer 2

私はあなたにこれを行うにはどのようにサンプルを提供します。各行に表示されるボタン上でjavascriptのonclick機能を設定するだけです。 onclickをいくつかの関数に設定し、その関数に変数を渡します。 <button onclick="deleteUserRow(uid)">Cancel</button>がjavascriptの部分に追加されました。その機能を追加する

deleteUserRow(uid){ 
    firebase.database().ref('Reservation/user').child(uid).remove(); 
}