Javascript 使用jQuery在HTML元素中生成动态ID

我内置了一个网络简历生成器来学习如何为网络开发简历。我已经制作了一个HTML表单，用户可以添加更多字段来添加更多关于他的信息。他有不止一项专业经验，但表格以一个prof exp字段开始填写。因此，他点击AddNewExp按钮，JS为其创建一个新字段。我使用jQuery中的clone方法来实现这一点，但这给了我下面列出的问题。此外，以下是我编写的代码：

var指数=0； $document.ready=>{ $add-exp.click=>{ $professional.clone.attrid，professional+index++。 附录PROFESSIONAL-info.findselect，input，textarea.val； } } 专业经验 尼维尔： 孤岛 埃斯塔吉奥 初级/见习生 辅助/操作 普莱诺 塞尼尔 监督员/协调员 格尔尼亚 货物： Empresa： Início： 蒂尔米诺： 阿因达·特拉巴略·阿基 描述： 删除此专业xp 添加其他专业经验

---

如果您已经将输入内容包装在标签中，则不再需要id， 您可以将其用作delete button的参数，因此您可以使用它删除块

请检查以下示例

$function{ //将第一个块作为空模板隐藏 $”。表格行：第一个。隐藏； //触发添加新项目 附加项； } 函数附加项{ var container=$‘container’； //克隆表单，显示并在添加按钮之前追加 var cloned=$”。表单行：first'.clone.show.insertBefore$'addBtn'； } 函数删除项{ //获取表单元素并将其删除 $elm.closest'.表格行'.删除 } .form行{边框：1px实心ccc；边距：5px 0；填充：10px；} 字段1： 字段2：

---

将新的remove按钮与其professional div连接的一种方法是在事件处理程序中添加一条额外的语句，以与新div的id并行更新其id，类似于：

let lastIndex = index - 1;
$("#professional" + lastIndex).find("button").attr("id", "add-exp" + lastIndex);

这段代码可能没有正确的语法-我不太使用jQuery-但是您可以看到这个想法

更好的方法可能是，单击移除按钮时，不要根据ID移除，而是找到祖先div并移除该div

---

对于标签，您应该省去id，因为同一页上的两个元素都不应该具有相同的id。而且，由于输入嵌套在标签中，您还应该能够省去For属性，并让关联隐式存在。请参阅。

正如建议的那样，Vue.js很酷，但jQuery也有一些被遗忘的功能

而且，由于您是动态创建元素的，所以不要使用ID。 并将您的体验作为数组[]提交到后端：即：name=carrer[]，name=company[]等，而不是在后端循环这些数据数组以检索所有用户体验

const new_exp==>${ “类”：“专业经验”， html:` 尼维尔： 孤岛 埃斯塔吉奥 货物： Empresa： Início： 蒂尔米诺： 阿因达·特拉巴略·阿基 描述： `, 附加：${ 键入：“按钮”， 文本：“删除”， 点击{ $this.closest'.professional exp'.remove； } }, 附录：“专业人士”， }; jQuery$=>{//DOM ready和$alias在作用域中 new_exp；//在init上创建第一个exp $new\u exp.on'click'，new\u exp；//on click }; .专业经验{ 填充：10px； 边缘底部：10px； 背景：eee； } 专业经验 +添加更多

---

演示代码的细节在代码本身中有注释。s和s的某些类有一些小的更改。结构有点改变，所以请记住这一点。jQuery是多功能的，它允许您泛化DOM操作并消除对ID的依赖性——只使用类是非常可能的

除非委派事件，否则注册到动态标记的事件将失败。要将单击事件委托给当前和将来存在的所有按钮，请注册一个按钮通常共享的祖先标记（例如main）。然后在第二个参数事件数据中指定按钮的选择器：

对于通过单击嵌套按钮来删除，可以使用$e.target和$this引用当前单击的按钮。当您需要查找所单击按钮的适当祖先时，请使用以下最接近的方法：

演示 设指数=0； //隐藏第一个。删除按钮 $‘删除’。隐藏； /* 将表单注册到单击事件 事件数据指示。添加和。删除bu

$('#main').on('click', '.add, .remove', function(e) {...  

$(e.target).closest('.professional').remove();