删除按钮以删除整个Firebase数据行

Question

我在看起来应该很简单的问题上遇到了麻烦。我想删除保存Firebase数据的HTML表中的整行。从delete_row函数中单击“删除”后，我已经能够删除用户的整个Firebase父节点，但是我只想删除单击了删除按钮的行。提前致谢！

//表

<table style="width:100%">
<tr>
<td>Id: </td>
<td><input type="text" name="id" id="user_id" /></td>
</tr>
<tr>
<td>Place Name: </td>
<td><input type="text" name="user_name" id="user_name" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Add Place" onclick="create_row();" />
<input type="button" value="Delete" onclick="delete_row();" />
</td>
</tr>
</table>

<table id="tbl_users_list" border="1">
<tr>
<td>#Id</td>
<td>PLACE NAME</td> 
</tr>   
</table>

//创建和删除行的脚本

<script>
var tblUsers = document.getElementById("tbl_users_list");
// firebase reference
var database = firebase.database().ref('users/');
var rowIndex = 1;

 database.once('value', function(snapshot) {
 snapshot.forEach(function(childSnapshot) {
 var childKey = childSnapshot.key;
 var childData = childSnapshot.val();

 var row = tblUsers.insertRow(rowIndex);
 var cellId = row.insertCell(0);
 var cellName = row.insertCell(1);
 var cellButtons = row.insertCell(2).outerHTML="<tr id='row"+rowIndex+"'><td><input type='button' value='Delete' class='delete' onclick='delete_row()'></td></tr>";                                   

 cellId.appendChild(document.createTextNode(childKey));                                
 cellName.appendChild(document.createTextNode(childData.user_name)); 
 rowIndex = rowIndex + 1;                               
 });
 });

function create_row() {
var user_name = document.getElementById('user_name').value;
var uid = firebase.database().ref().child('users').push().key;

var data = {
user_id: uid,
user_name: user_name
}

var updates = {};
updates['/users/' + uid] = data;
firebase.database().ref().update(updates);

alert('the user was created successfully');
reload_page();   
}

function delete_row() { 
var key = document.getElementById(row).row.childData;

firebase.database().ref().child('users/' + row + '/').remove();
alert('row was removed');
reload_page();
}

function reload_page() { 
window.location.reload();     
}

</script>

Answer 1

您可以将childKey传递给delete_row()方法。这样，您可以告诉Firebase删除哪个节点：

 database.once('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
        var childKey = childSnapshot.key;
        var childData = childSnapshot.val();

        var row = tblUsers.insertRow(rowIndex);
        var cellId = row.insertCell(0);
        var cellName = row.insertCell(1);
        var cellButtons = row.insertCell(2).outerHTML=
        "<tr id='row"+rowIndex+"'><td><input type='button' value='Delete' class='delete' onclick='delete_row("+childKey+")'></td></tr>";                                   

        cellId.appendChild(document.createTextNode(childKey));                                
        cellName.appendChild(document.createTextNode(childData.user_name)); 
        rowIndex = rowIndex + 1;                               
    });
 });

function delete_row(childKey) { 
    var key = document.getElementById(row).row.childData;

    firebase.database().ref().child('users/' + childKey + '/').remove();
    alert('row was removed');
    reload_page();
}

Answer 2

任何人都可以帮助我吗？我也有referenceError。