如何使用删除按钮从 Firebase 数据库中删除子项？

Question

通过使用以下代码，我从 firebase 数据库中读取所有子值并在 div 中显示所有值，并且每个 div 都有一个删除按钮但是如果想通过单击删除按钮（使用 loaddelete 函数）删除特定子项，则删除数据库的第一个孩子。请有人告诉我如何使用删除按钮删除特定的孩子？提前致谢

   <script>//from db
        var Ref = firebase.database().ref('Driver');

        Ref.on("child_added", function(snap) {
        document.querySelector('.main-content').innerHTML += contactHtmlFromObject(snap.val());
        });

function contactHtmlFromObject(Driver){
  console.log(Driver);
  var html = '';
    html +='<div class="col-md-4">';
    html +='    <div class="bg-primary img_details">';
    html +='            <div class="row">';
    html +='                <div class="col-md-4 col-sm-4 col-xs-4                              img-wrapper" style="height:200px;">';
    html +='                    <div class="only-img">';
    html +='                    <img src="'+Driver.FilePhoto+'"                                 height="100%" width="100%">';
    html +='                    </div>';
    html +='                    <div class="only-option">';
    html +='                         <div class="row">';
    html +='                            <div class="col-md-12">';
    html +='                                <input                                                      type="checkbox"> Disabled';
    html +='                            </div>';
    html +='                        </div>';
    html +='                        <div class="row">';
    html +='                            <div class="col-md-4 col-                                 sm-4 col-xs-4">';
    html +='                                <div type="button"                                              class="btn btn-primary                              edit" onclick="loadedit()"                                      >Edit</div>';
    html +='                            </div>';
    html +='                            <div class="col-md-6 col-                         sm-6 col-xs-6">';
    html +='                                <div type="button"                            class="btn btn-primary delete"                                    onclick="loaddelete()" >Delete</div>';
    html +='                          </div>';
    html +='                         </div>';
    html +='                    </div>';
    html +='                </div>';
    html +='                <div class="col-md-8 col-sm-8 col-xs-8                              details-wrapper">';
    html +='                    <div class="row">';
    html +='                        <div class="col-md-12">';
    html +='                            <b>Name:</b>                                              '+Driver.Fname+' '+Driver.Lname;
    html +='                        </div>';
    html +='                        <div class="col-md-12">';
    html +='                            <b>Address:</b>                                       '+Driver.Address;
    html +='                        </div>';
    html +='                        <div class="col-md-12">';
    html +='                            <b>Experience:</b>                                          '+Driver.Experience+' Years';
    html +='                        </div>';
    html +='                        <div class="col-md-12">';
    html +='                            <b>Phone Number:</b>                          '+'<span id="phoneid">'+Driver.Phone+"</span>";
    html +='                        </div>';
    html +='                        <div class="col-md-12">';
    html +='                            <b>Gender:</b>                                  '+Driver.Gender;
    html +='                        </div>';
    html +='                        <div class="col-md-12">';
    html +='                            <b>Date of Birth:</b>                                 '+Driver.DOB;
    html +='                        </div>';
    html +='                        <div class="col-md-12">';
    html +='                            <b>PIN:</b>                                   '+Driver.Pin+'</span';
    html +='                        </div>';
    html +='                        <div class="col-md-12">';
    html +='                        <b>Hired Date:</b>                                        '+Driver.HireDate;
    html +='                     </div>';
    html +='                  </div>';
    html +='               </div>';
    html +='            </div>';
    html +='        </div>';
    html +='        </div>';
    return html;
}

function loaddelete(e) {
    var fdb = firebase.database().ref();
    var phoneid=document.getElementById('phoneid').innerText;
      if(confirm('Are you sure?')){
         alert(fdb.child("Driver/id"+phoneid+'/'));
          
      }
    window.location="driver.html";
}

Answer 1

要从 Firebase 中删除节点，您必须知道其完整路径。现在您的代码只知道/Driver，然后只找到第一个带有id=phoneid 的元素并从中创建/Driver/first_phone_id_value。

要删除用户单击的驱动程序，您需要确保：

1. HTML 中的每个驱动程序还包含该驱动程序的密钥
2. 检测用户单击的驱动程序的密钥，并将其传递给您的 JavaScript 代码
3. 删除该特定键的驱动程序

因此，第一步是将每个驱动程序的密钥放入您生成的 HTML 中。密钥在您当前未使用的 Snapshot.key 中可用。因此，除了值之外，让我们首先将密钥传递给您的 HTML 生成器：

Ref.on("child_added", function(snap) {

    document.querySelector('.main-content').innerHTML += contactHtmlFromObject(snap.key, snap.val());
});

现在在 contactHtmlFromObject 中，我们将密钥传递给 HTML 到对 loaddelete 的调用中：

function contactHtmlFromObject(Key, Driver){
  ...
  html +='<div type="button" class="btn btn-primary delete"                                    onclick="loaddelete('+Key+')" >Delete</div>';

最后在loaddelete 中，我们可以使用密钥创建对被点击的驱动程序的引用：

function loaddelete(key) {
  var fdb = firebase.database().ref();
  if(confirm('Are you sure?')){
    firebase.database().ref('Driver/'+key+'/') // create a reference to the driver
      .remove()                                // remove the driver
      .then(function() {                       // once the driver is removed
        window.location="driver.html";         // navigate to the driver page
      });
  }
}