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。

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

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

因此，第一步是将每个驱动程序的密钥获取到生成的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
      });
  }
}

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

1 个答案: