javascript - 如何使用删除按钮从 Firebase 数据库中删除子项?
问题描述
通过使用以下代码,我从 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";
}
解决方案
要从 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
我们可以使用 key 来创建对被点击的驱动程序的引用:
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
});
}
}
推荐阅读
- python - 将仅具有 3 个因子的数组中的数字相加
- angular - 无法使用 npm 作为包管理器创建新的 Angular 项目
- java - Java分配使用Dijkstras搜索方法,呼吸优先和深度优先
- javascript - 如何将道具从另一个 js 模块传递给 Vue?
- c# - UI 项目之外的 IEmailSender
- python - 字符串格式化——跳过一个格式化字符串
- android - Flutter:更改应用栏上文本的位置
- postgresql - POSTGRES_PASSWORD 被忽略并且可以在没有或使用任何密码的情况下访问数据库
- c++ - C++ while 循环和 for 循环不起作用
- javascript - 在 java 脚本中调用 AWS REST API