简单JavaScript&；jQuery函数'；有时'；跑太多次

我构建了一个演示，它只允许您创建新行并删除它们。这些行被赋予一个唯一的

数据id

属性和一个对象，其中每个数据id被推送到

行

数组中

出于某些原因，单击“删除行”图标有时会多次尝试删除它-例如，执行以下操作：

打开JS控制台，添加2个额外的行（通过单击两次“添加一行”），然后删除中间的第2行（通过单击该行左侧的删除图标），您将看到控制台记录了两次“删除的第2行”——它应该只记录一次。如果创建多行，然后删除行，它有时会多次重复该操作

有人知道为什么会发生这种情况，以及如何修复吗？我被难住了。它应该只发生一次，我假设整个函数运行了很多次。任何修复和“最佳实践”建议都会非常有用，谢谢

代码笔：

让templateRow、addBtn、templateRows、表体、弹出窗口、对象、行=[]；
$（文档）.ready（函数（）{
runDefaults（）；
});
函数runDefaults（）{
$（“.no_entries_row”）.detach（）.insertBefore（“.template_row”）；
$（'.template_row'）.first（）.attr（'data-id'，'1'）；
定义变量（）；
removeRow（）；
testEmpty（）；
展示成功（）；
addRow（）；
changeBg（）；
}
函数定义变量（）{
templateRow=$（''）.append（$（'.template_行'）.clone（））.html（）；
addBtn=$（'.list_add'）；
templateRows=$（'.template_行'）；
弹出=$（“.popup”）；
tableBody=$（'tbody'）；
}
函数{
让我们离开；
//在这里的某个地方重复错误？
templateRows.on（“单击“，”.controls”，函数（）{
removeId=$（this.parent（）.attr（'data-id'）；
$（this.parent（）.fadeOut（0，function（））{
$（this.remove（）；
});
templateRows=$（'.template_行'）；
testEmpty（）；
rows=rows.filter（obj=>obj.id！=removeId）；console.log（'Removed Row'+removeId）；
});
}
函数testEmpty（）{
让rowsLen=$（'.template_row'）.length，
noEntriesRow=$（'.no_entries_row'）；
如果（rowsLen==0）
css（'display'，'table-row'）；
其他的
css（'display'，'none'）；
}
函数showSuccess（）{
$（“.submit”）。单击（函数（）{
popup.fadeIn（）；
});
}
函数addRow（）{
设id=1；
新的rowObj（1）；
addBtn.on（“单击”，函数（）{
id++；
tableBody.append（templateRow）；
templateRows=$（'.template_行'）；
noOfRows=templaterrows.length；
$（'.template_行：第n行类型（'+（noOfRows+1）+'））.attr（'data-id'，id）；
removeRow（）；
testEmpty（）；
changeBg（）；
新rowObj（id）；
});
}
函数changeBg（）{
$（“.label”）.change（函数（）{
让颜色=这个值；
$（this.parent（）.parent（）.css（'背景'，颜色）；
});
}
函数rowObj（id）{
this.id=id；
this.description='表行'；
推（这个）；
}

*{
框大小：边框框；
填充：0；
保证金：0；
}
身体{
填充：30px；
字体系列：arial；
}
桌子{
宽度：100%；
背景色：#fff；
文本对齐：左对齐；
边框：1px实心#ccc；
边界塌陷：塌陷；
边缘底部：10px；
}
tbody tr:not（：类型的最后一个），thead tr{border bottom:1px solid#ccc}
thead th{
背景：#f0；
填充：10px；
}
td{padding:10px 10px 10px 0}
.no_entries_row>td{padding left:60px}
.btn_col，.控件{文本对齐：居中}
.controls{填充：0}
a、 列表_取消{颜色：#000}
a、 列表\u添加{
文字装饰：无；
颜色：#54A2CE；
}
i[class*=“fa-fa+square”{颜色：#999999}
.行动{
显示器：flex；
柔性流：行换行；
对齐项目：居中；
宽度：自动；
证明内容：中心；
边缘顶部：20px；
}
.action_btn输入{margin:0}
输入[名称=“提交”]{
填充：5px15px；
字号：1em；
利润率：0.10px；
}
.弹出窗口{
弹性：1100%；
边缘顶部：30px；
文本对齐：居中；
字号：1.5em；
显示：无；
}
.popup>p{
填充：20px 50px；
背景：浅绿色；
字号：700；
边界半径：15px；
}
@介质（最小宽度：950px）{
.popup>p{
宽度：25%；
保证金：0自动；
} 
}
输入，选择{
宽度：100%；
边界半径：5px；
填充物：5px；
边框：1px实心#ccc；
}
挑选{
-webkit外观：菜单列表按钮；
-moz外观：菜单列表按钮；
外观：菜单列表按钮；
填充物：5px；
高度：25px；
}

演示
演示栏1
演示栏2
演示栏3
演示栏4
第5列
演示栏6
成功
错
错误
没有条目


依我拙见，你的代码太复杂了

下面是没有实际问题的同一行添加/删除行为，以及基于
更改的行颜色。。。只有3个事件处理程序

我没有碰你的HTML标记。我添加了一个CSS规则（隐藏模板行）。。。并完全重新编写源代码