使用OnClick函数JavaScript删除Firebase节点

时间:2018-06-18 18:00:13

标签: javascript html firebase twitter-bootstrap-3

我有两个JavaScript函数,一个用于生成表,另一个用于通过从Firebase数据库中删除节点来删除行。我一直收到一条错误,说明deleteRecord()函数未定义。请帮忙......

            function generate_table(){

                        $('#emp_body').html('');    
                        console.log(dArr);

                        for (var i = 0; i < dArr.length; i++) {

                        var tr;
                        tr = $('<tr/>');

                        var strSleeve = "View Sleeve";
                        var sleeveLink = strSleeve.link(dArr[i][1].downloadURLSleeve);
                        var strAud = "View Audio";
                        var audioLink = strAud.link(dArr[i][1].downloadURLFile);
                                    tr.append("<td>" +  (i+1) + "</td>");
                                    tr.append("<td>" +  childKeys[i] + "</td>");
                                    tr.append("<td>" +  dArr[i][1].stageName + "</td>");
                                    tr.append("<td>" +  dArr[i][1].fullName + "</td>");
                                    tr.append("<td>" +  dArr[i][1].email + "</td>");
                                    tr.append("<td>" +  dArr[i][1].city + "</td>");
                                    tr.append("<td>" +  dArr[i][1].cell + "</td>");
                                    tr.append("<td>" +  sleeveLink + "</td>");
                                    tr.append("<td>" +  audioLink + "</td>");


                                    tr.append('<td>' + '<button id="deleteBtn" onclick="deleteRecord(\''+childKeys[i]+'\');" class="btn btn-danger">Delete Record</button>' + '</td>');
                                    $('#emp_body').append(tr);

                }

            }


                                        // DELETE FUNCTION
            function deleteRecord(key){     
                                var refDB = firebase.database().ref().child('submissions/'+key);
                                    refDB.once("value")
                                    .then(function(snapshot) {
                                        snapshot.ref.remove();
                                        alert("Record deleted..!");
                                }).catch(function(error) {alert("Data could not be deleted." + error);});
                        } 

3 个答案:

答案 0 :(得分:2)

您应该执行以下操作:

        function deleteRecord(key){     
                            var refDB = firebase.database().ref('submissions/' + key);
                            refDB.remove()
                            .then(function() {
                              console.log("Remove succeeded.")
                            })
                            .catch(function(error) {
                              console.log("Remove failed: " + error.message)
                            });
                    } 

请在此处查看相应的文档:https://firebase.google.com/docs/reference/js/firebase.database.Reference#remove

您不应使用用于读取数据的once()方法,如下所述:https://firebase.google.com/docs/reference/js/firebase.database.Reference#once

答案 1 :(得分:0)

我想出了一个解决方法。我认为事情会变得更容易。现在我将使用url到特定节点并从firebase中删除项目,同时我试图找出更好的方法。

            function generate_table(){

                        $('#emp_body').html('');    
                        console.log(dArr);

                        for (var i = 0; i < dArr.length; i++) {

                        var tr;
                        tr = $('<tr/>');

                        var strSleeve = "View Sleeve";
                        var sleeveLink = strSleeve.link(dArr[i][1].downloadURLSleeve);
                        var strAud = "View Audio";
                        var audioLink = strAud.link(dArr[i][1].downloadURLFile);
                                    tr.append("<td>" +  (i+1) + "</td>");
                                    tr.append("<td>" +  childKeys[i] + "</td>");
                                    tr.append("<td>" +  dArr[i][1].stageName + "</td>");
                                    tr.append("<td>" +  dArr[i][1].fullName + "</td>");
                                    tr.append("<td>" +  dArr[i][1].email + "</td>");
                                    tr.append("<td>" +  dArr[i][1].city + "</td>");
                                    tr.append("<td>" +  dArr[i][1].cell + "</td>");
                                    tr.append("<td>" +  sleeveLink + "</td>");
                                    tr.append("<td>" +  audioLink + "</td>");

                                    var deleteLink = 'https://myFirebaseAuthDomain.firebaseio.com/submissions'+'/'+ childKeys[i];

                                  tr.append('<td>' + '<button id="deleteBtn"  class="btn btn-danger">Delete Record</button>' + '</td>');
                                    $('#emp_body').append(tr);

                                    document.getElementById("deleteBtn").onclick = function() 
                                                {
                                                        console.log("AHOY!" + deleteLink);
                                                        var win = window.open(deleteLink, '_blank');
                                                        win.focus();
                                                };

                    }

            }

答案 2 :(得分:0)

通常,您获取表格的数据,此时Firebase不在图片中。您可以根据需要使用响应数据并使用JavaScript或任何脚本构建UI,在您需要表格的情况下。

我建议您为每个表行添加一个dataset属性,该行包含该行所代表的任何节点的值,例如: dataset.myid = a8hKE21Nswtevr已应用于每个<tr>

然后,您可以将整个表或行(按类)的点击侦听器应用到evt.target.parentElement.dataset.myid,以获取最终用户单击的特定内容。

然后根据需要使用该uid并与firebase对话。