如何获取按钮ID并删除Firebase实时数据库对应元素

一、删除按钮的ID获取与事件绑定 #

你当前通过innerHTML生成删除按钮的方式不利于事件绑定，推荐两种更可靠的方案：

方案1：创建按钮时直接绑定点击事件 #

在循环生成表格行的过程中，直接创建按钮元素并绑定点击逻辑，无需依赖innerHTML：

// 替换原代码中td_button.innerHTML的部分
const deleteBtn = document.createElement('button');
deleteBtn.className = 'btn btn-danger delete';
deleteBtn.id = key;
deleteBtn.textContent = 'Borrar';

// 绑定点击事件
deleteBtn.addEventListener('click', function() {
  const sensorId = this.id;
  console.log('待删除传感器ID：', sensorId);
  // 执行删除操作
  deleteSensorFromFirebase(sensorId);
  // 同步删除表格行
  this.closest('tr').remove();
});

td_button.appendChild(deleteBtn);

方案2：使用事件委托（适配动态生成元素） #

如果偏好动态绑定，可给表格tbody绑定全局点击事件，通过事件冒泡判断点击目标：

// 放在页面脚本或getSonido函数外部
document.getElementById('tbody_sonido').addEventListener('click', function(e) {
  if (e.target.classList.contains('delete')) {
    const sensorId = e.target.id;
    console.log('待删除传感器ID：', sensorId);
    deleteSensorFromFirebase(sensorId);
    e.target.closest('tr').remove();
  }
});

二、Firebase数据删除的正确实现 #

问题排查前提 #

首先确认Firebase数据库规则允许删除操作，测试环境可临时放开权限（生产环境需严格限制）：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

方式1：使用Fetch API发送DELETE请求 #

完善错误处理逻辑，确保URL路径与数据库节点完全匹配：

async function deleteSensorFromFirebase(sensorId) {
  const url = `https://iotplatform-11dca-default-rtdb.firebaseio.com/users/awsBewgkSMcqiINzOoFUiUe9D6r1/data_widget/sensor/sonido/${sensorId}.json`;
  try {
    const response = await fetch(url, { method: 'DELETE' });
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    const result = await response.json();
    console.log('数据删除成功：', result);
  } catch (error) {
    console.error('删除失败：', error);
  }
}

方式2：使用Firebase SDK的remove方法 #

如果选择SDK方式，需先完成初始化：

1. 在HTML中引入SDK：

<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js"></script>

2. 初始化Firebase并编写删除函数：

// 替换为你的Firebase配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "iotplatform-11dca.firebaseapp.com",
  databaseURL: "https://iotplatform-11dca-default-rtdb.firebaseio.com",
  projectId: "iotplatform-11dca",
  storageBucket: "iotplatform-11dca.appspot.com",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
};

firebase.initializeApp(firebaseConfig);
const db = firebase.database();

function deleteSensorFromFirebase(sensorId) {
  db.ref(`users/awsBewgkSMcqiINzOoFUiUe9D6r1/data_widget/sensor/sonido/${sensorId}`)
    .remove()
    .then(() => console.log('数据删除成功'))
    .catch(error => console.error('删除失败：', error));
}

内容的提问来源于stack exchange，提问作者ADRIAN LEON ORTEGA