删除表格行时无法获取news-uid属性，该如何解决？

开发者阿泽

2026-5-7

问题分析与解决方案

我来帮你拆解下问题出在哪，以及怎么快速解决：

核心问题：DOM元素层级查找错误

你当前的代码里，e.target指向的是点击的具体元素——也就是<i class="fas fa-trash"></i>这个图标。它的直接父元素是<a>标签，而带news-uid属性的是最外层的<tr>行，所以e.target.parentElement只能拿到<a>，自然取不到news-uid属性。

解决方案1：用`closest()`精准定位表格行

closest()方法可以从当前元素向上遍历DOM树，找到第一个匹配选择器的元素，非常适合这种场景。修改你的删除函数如下：

const deletetBtn = document.querySelector('#deleteBtn');
deletetBtn?.addEventListener('click', (e) => {
 e.preventDefault();
 // 向上查找最近的带news-uid属性的tr行
 let uid = e.target.closest('tr[news-uid]').getAttribute('news-uid');
 console.log(uid);
 // 注意：这里有个拼写错误，delte要改成delete
 db.collection('news').doc(uid).delete();
});

不管你点击的是图标本身，还是按钮的其他区域，closest('tr[news-uid]')都能准确找到对应的表格行，完美解决层级问题。

解决方案2：给删除按钮绑定数据属性（更直观）

另一种思路是在创建删除按钮时，直接把doc.id存到按钮的data-*属性里，这样不需要向上查找tr行，直接从按钮拿数据：

首先修改创建删除按钮的代码：

var deletetActionBtn = `<a href="#" class="btn btn-danger btn-circle btn-sm" data-toggle="modal" data-target="#deleteNewsModal" data-news-uid="${doc.id}"> <i class="fas fa-trash"></i></a>`;

然后修改删除函数：

const deletetBtn = document.querySelector('#deleteBtn');
deletetBtn?.addEventListener('click', (e) => {
 e.preventDefault();
 // 找到带data-news-uid属性的按钮
 let uid = e.target.closest('a[data-news-uid]').getAttribute('data-news-uid');
 console.log(uid);
 db.collection('news').doc(uid).delete();
});

这种方式把数据和按钮直接绑定，逻辑更清晰，后续维护也更方便。