如何在JavaScript中正确删除Firebase子节点数据？

核心问题 #

• 所有卡片内的输入框共用同一个id="kea"，DOM中id必须唯一，点击删除按钮时只能获取到第一个输入框的值，导致Firebase路径错误。
• 删除函数未关联当前点击的卡片，无法精准定位目标节点。

修正方案（推荐：直接传递节点键） #

1. 修改HTML生成逻辑 #

将删除按钮的点击事件改为直接传递当前卡片对应的Firebase节点键，同时给输入框设置唯一id并设为只读（避免用户误改）：

const contactHtmlFromObject = (key, contact) => `
<div class="card contact" style="width: 100%" id="${key}">
  <div class="card-body">
    <button class="arrival btn btn-danger btn-xs" onclick="delete_user('${key}')">X</button>
    <h5 class="card-title">User: ${contact.a2}</h5>
    <h6 class="card-subtitle mb-2 text-muted">User1: ${contact.a3}</h6>
    <p class="card-text" title="${contact.a1}">
      Expiry:${contact.a1} - Vip:${contact.a4} - Status:${contact.a5}
    </p>
    <input type="text" class="form-control" id="kea-${key}" value="${contact.a7}" readonly>
  </div>
</div>`;

2. 优化删除函数 #

直接接收传入的节点键，构造正确的Firebase路径，并处理成功/失败回调：

function delete_user(nodeKey) {
  firebase.database().ref(`contact/${auth.uid}/${nodeKey}`).remove()
    .then(() => {
      // 删除成功后同步移除页面上的对应卡片
      document.getElementById(nodeKey).remove();
      alert('用户删除成功！');
    })
    .catch(error => {
      alert('删除失败：' + error.message);
    });
}

备选方案（依赖输入框值） #

如果必须通过输入框的值删除，需通过按钮定位到当前卡片内的输入框，避免id冲突：

1. 修改按钮点击事件 #

const contactHtmlFromObject = (key, contact) => `
<div class="card contact" style="width: 100%" id="${key}">
  <div class="card-body">
    <button class="arrival btn btn-danger btn-xs" onclick="delete_user(this)">X</button>
    <!-- 移除重复id，改用类选择器 -->
    <input type="text" class="form-control kea-input" value="${contact.a7}">
    <!-- 其余内容不变 -->
  </div>
</div>`;

2. 修改删除函数 #

function delete_user(btnElement) {
  // 找到当前卡片内的输入框
  const input = btnElement.closest('.card-body').querySelector('.kea-input');
  const nodeKey = input.value.trim();
  
  if (!nodeKey) {
    alert('请确认节点键不为空');
    return;
  }

  firebase.database().ref(`contact/${auth.uid}/${nodeKey}`).remove()
    .then(() => {
      btnElement.closest('.card').remove();
      alert('用户删除成功！');
    })
    .catch(error => {
      alert('删除失败：' + error.message);
    });
}

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