实现点击删除按钮移除Firebase对应数据行的问题求助

看起来你现在的核心问题是点击删除按钮时会误删整个users父节点，这主要是因为删除函数没拿到当前行对应的Firebase节点唯一标识，同时按钮的点击事件也没传递必要的参数。下面我来一步步帮你修正：

问题根源分析 #

1. 每行的删除按钮onclick='delete_row()'没有传递任何标识，函数无法定位要删除的行
2. delete_row函数里的路径逻辑错误：firebase.database().ref().child('users/' + row + '/').remove()中的row是未定义变量，导致路径错误甚至误删整个节点
3. 表格行创建时的DOM结构有问题：cellButtons = row.insertCell(2).outerHTML="<tr...>"会把当前行替换成新的<tr>，导致表格结构混乱

具体修正方案 #

1. 修复表格行的渲染逻辑 #

在从Firebase拉取数据生成表格行时，要把当前节点的childKey（也就是Firebase中该条数据的唯一ID）传递给删除按钮，同时正确创建操作单元格：

database.once('value', function(snapshot) {
  snapshot.forEach(function(childSnapshot) {
    var childKey = childSnapshot.key;
    var childData = childSnapshot.val();
    var row = tblUsers.insertRow(rowIndex);
    // 给行设置唯一ID，方便后续DOM操作
    row.id = 'row-' + childKey;
    
    var cellId = row.insertCell(0);
    var cellName = row.insertCell(1);
    var cellButtons = row.insertCell(2); // 正确创建第三个单元格
    
    // 创建删除按钮，把childKey作为参数传给delete_row
    var deleteBtn = document.createElement('input');
    deleteBtn.type = 'button';
    deleteBtn.value = 'Delete';
    deleteBtn.className = 'delete';
    deleteBtn.onclick = function() {
      delete_row(childKey);
    };
    
    cellButtons.appendChild(deleteBtn);
    cellId.textContent = childKey; // 用textContent比createTextNode更简洁
    cellName.textContent = childData.user_name;
    rowIndex++;
  });
});

2. 重写delete_row函数 #

现在函数接收childKey作为参数，直接定位到Firebase中对应的节点删除，还可以直接移除DOM行，不用强制刷新页面：

function delete_row(childKey) {
  // 只删除指定key的用户节点
  firebase.database().ref('users/' + childKey).remove()
    .then(function() {
      alert('Row removed successfully!');
      // 直接从页面移除对应行，无需刷新
      var rowToDelete = document.getElementById('row-' + childKey);
      if (rowToDelete) {
        rowToDelete.remove();
      }
      // 如果还是需要刷新页面，保留下面这行即可
      // reload_page();
    })
    .catch(function(error) {
      alert('Error removing row: ' + error.message);
    });
}

3. 优化顶部的全局删除按钮（可选） #

如果你想保留页面顶部的Delete按钮，让它通过输入框的ID删除数据，可以做如下修改：

先修改HTML按钮：

<input type="button" value="Delete by ID" onclick="delete_row_by_id();" />

再添加对应的函数：

function delete_row_by_id() {
  var userId = document.getElementById('user_id').value;
  if (!userId) {
    alert('Please enter a user ID first!');
    return;
  }
  firebase.database().ref('users/' + userId).remove()
    .then(function() {
      alert('User deleted successfully!');
      var rowToDelete = document.getElementById('row-' + userId);
      if (rowToDelete) {
        rowToDelete.remove();
      }
      // 清空输入框
      document.getElementById('user_id').value = '';
    })
    .catch(function(error) {
      alert('Error deleting user: ' + error.message);
    });
}

完整修改后的代码 #

整合所有修改后，你的代码应该是这样的：

<!-- 输入表格 -->
<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 by ID" onclick="delete_row_by_id();" />
    </td>
  </tr>
</table>

<!-- 数据展示表格 -->
<table id="tbl_users_list" border="1">
  <tr>
    <td>#Id</td>
    <td>PLACE NAME</td>
    <td>Actions</td> <!-- 新增操作列标题 -->
  </tr>
</table>

<script>
var tblUsers = document.getElementById("tbl_users_list");
// Firebase引用
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);
    row.id = 'row-' + childKey;
    
    var cellId = row.insertCell(0);
    var cellName = row.insertCell(1);
    var cellButtons = row.insertCell(2);
    
    var deleteBtn = document.createElement('input');
    deleteBtn.type = 'button';
    deleteBtn.value = 'Delete';
    deleteBtn.className = 'delete';
    deleteBtn.onclick = function() {
      delete_row(childKey);
    };
    
    cellButtons.appendChild(deleteBtn);
    cellId.textContent = childKey;
    cellName.textContent = childData.user_name;
    rowIndex++;
  });
});

// 添加新数据
function create_row() {
  var user_name = document.getElementById('user_name').value;
  if (!user_name) {
    alert('Please enter a place name!');
    return;
  }
  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)
    .then(function() {
      alert('The user was created successfully');
      reload_page();
    })
    .catch(function(error) {
      alert('Error creating user: ' + error.message);
    });
}

// 删除指定行数据
function delete_row(childKey) {
  firebase.database().ref('users/' + childKey).remove()
    .then(function() {
      alert('Row removed successfully!');
      var rowToDelete = document.getElementById('row-' + childKey);
      if (rowToDelete) {
        rowToDelete.remove();
      }
    })
    .catch(function(error) {
      alert('Error removing row: ' + error.message);
    });
}

// 通过ID删除数据
function delete_row_by_id() {
  var userId = document.getElementById('user_id').value;
  if (!userId) {
    alert('Please enter a user ID first!');
    return;
  }
  firebase.database().ref('users/' + userId).remove()
    .then(function() {
      alert('User deleted successfully!');
      var rowToDelete = document.getElementById('row-' + userId);
      if (rowToDelete) {
        rowToDelete.remove();
      }
      document.getElementById('user_id').value = '';
    })
    .catch(function(error) {
      alert('Error deleting user: ' + error.message);
    });
}

// 刷新页面
function reload_page() {
  window.location.reload();
}
</script>

关键修改总结 #

• 给每行的删除按钮传递Firebase节点的childKey，准确定位要删除的数据
• 修正删除函数的路径，避免误删整个父节点
• 优化表格DOM结构，修复错误的行替换逻辑
• 添加Promise错误处理，提升用户体验
• 支持删除后直接移除页面行，无需强制刷新

内容的提问来源于stack exchange，提问作者user3708224