如何刪除特定的帖子ID？

Question

對不起，我的錯誤我很新，發佈堆棧溢出。希望我提供了足夠的信息。理論上，我試圖按取消刪除行（取下該部分）並刪除相應的ID（-KiN ...）。

當我單擊表中第一條記錄上的取消時，它將刪除數據庫中的第一條記錄，但如果我單擊了最後一條記錄，它仍會刪除第一條記錄。所以總之我無法取消對應於表中取消按鈕的預約。

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(); 
}