使用jQuery和JavaScript渲染Firestore数据时出现重复行问题

问题根源 #

你的HTML里<table>和<tbody>都加了artist-list类，代码中用$('.artist-list')选择元素时，会同时匹配这两个标签。每次遍历一条数据，行模板都会分别追加到table和tbody里，3条数据自然就生成了3×2=6行。

解决办法 #

1. 精确选择目标元素：
   • 去掉<table>上的artist-list类，只给<tbody>保留这个类，这样$('.artist-list')只会选中tbody，不会重复追加。
   • 或者把选择器改成更具体的写法，比如$('table.artist-list tbody')，直接定位到tbody标签。
2. 额外优化：避免重复渲染：
   每次读取数据渲染前，先清空tbody里的现有内容，比如执行$('.artist-list').empty()，防止多次调用渲染逻辑时，旧数据和新数据叠加。

内容的提问来源于stack exchange，提问作者김다빈