页面中不定项输入项的增添

页面中不定项输入项的添加

需求：

????? 在做‘景点+门票’这种类型的业务的时候，景点和门票是1-N的关系，一般可以先插入一条景点信息，再在这条今天信息的基础上加入多个门票信息，但是产品人员设计的文档中是要求‘景点+门票’一起插入，如下图所示。好吧既然你们的文档都通过了经理审核，那咱们就只有照做了。

?

思路：

???? 其实用JavaScript可以很容易做到动态的效果，步骤如下：

DOM中开始时候没有任何门票类型，只有一个‘添加门票类型’的按钮，并且给这个按钮一个唯一的id标识(当然可以选择其他的方式，但是这个应该是代码最少的)。单击该按钮的时候触发添加一组输入框(每组输入框由一个包围标签包含，并且需要包含删除按钮)，所以这里为这个按钮的onclick事件编写一个函数。函数中一次：a.编写这组信息输入框的代码 b.找到添加按钮 c.将这组输入框插入到这个按钮的前面。点击删除按钮，触发删除函数(需要将这组输入框的包围标签的唯一的id标识传给删除函数)编写删除函数：a.根据id找dom元素 b.删除该元素和下面所有内容。

???? 效果如下图所示(尤其注意这里还有个删除按钮)

?

代码：

局部HTML如下

?
这里用jQuery开发包，可以极大的缩短代码
?
这里用jQuery开发包，可以极大的缩短代码，使用ajax进行后台交互来删除已经存在于数据库中的‘老的‘门票类型
?
附：
有的时候如果不使用jQuery，那么最为麻烦的就是需要自己手动编写一个插入在目标元素后面(本例是在前面)插入dom元素。这里是一个已经抽象过的可用代码（网络上很容易找到）：
function insertAfter(newElement,targetElement) {  var parent = targetElement.parentNode;  if (parent.lastChild == targetElement) {    parent.appendChild(newElement);  } else {    parent.insertBefore(newElement,targetElement.nextSibling);  }}
?
?
参考：
《JavaSriptDOM编程艺术(第二版)》