jquery实现点击固定按钮根据模板添加HTML

jquery实现点击固定按钮根据模板添加HTML

开发工具与关键技术：VisualStudio C#
作者：落灵
撰写时间：2019/6/8

在做项目的功能时经常会需要这么一个功能，就是点击某个按钮，然后增加一个HTML元素。比如坐飞机购票时有两名以上的乘客，点击添加乘机人，就应该增加一个表单来让乘客输入信息，系统会会新增的乘机人继续排序，而且新增的乘机人可以执行删除的操作。
一、 新增HTML
这个功能比较简单，要实现这个功能我们首先得有一个模板，可以在写HTML内容时给它一个隐藏的模板，也可以在JS或者jquery的加载事件里面通过‘+’的方式连接HTML标签来自定义一个模板然后用变量来接收这个模板。


二、 根据添加的数量自动进行排序
在添加完新的HTML内容后我们需要对它进行排序，这样方便信息与HTML的内容一一对应。那怎么在新增的同时又进行排序呢？这个很简单，我们只需要在设定的模板里面添加一个唯一的类，然后我们再根据这个类的数量对新增的HTML进行排序。这就要用到for循环这个循环神器了。
如果我们要添加乘机人，那么首先我们需要声明一个全局变量j=0；这用于记录当前的乘机人数。再添加乘机人的同时让j+1。因为我们是根据某个特定的类的数量来进行排序的，在进行for循环之前先通过js的方式获取到这个类。紧接着就是通过for循环获取到这个类的长度（即这个类有多少个），然后再根据当前这个类的长度是多少，然后设置你要进行自动排序的text文本内容。

三、 删除新增的HTML元素
既然有新增，那就必然有删除。但这个删除跟平时的删除有点不一样，它是根据固定模板来添加的HTML。不能通过ID来精确到是删除哪一个，因为模板相同，所以类也相同，那么也不能根据类的方式来删除它。那么该怎么搞？答案很简单，我们只需要在添加模板的时候在要删除的那一部分给它添加一个点击事件获取到点击的这一部分HTML元素，即onlick=’Delete（this）’
。获取到点击的这一行后，接下来的内容就简单了。我们只需要在它点击的方法里找到你要删除的那一整块HTML元素进行整块的删除，即通过子元素找到父级的方式进行删除。因为我们要自动排序乘机人数，所以在执行点击事件时，每点击一次让j-1，这样整个删除的操作就大功告成了。
下面的代码也是以新增乘机人的删除为例。