添加和删除行

最近在做一个MVC项目，在做的过程中总会有各种功能需要完成，有些简单点，也有些复杂的，都需要你去完成。我遇到的这个功能不是很复杂，算是简单的吧，虽然也想了挺久的。下面就跟大家分享一下，做的这个功能：添加和删除行。

一个简单的例子：

1、首先必须是搭建页面了，代码如下图所示：

用div和p标签做一行内容，再放两个按钮就是添加和删除了，最后都给上各自的id

效果如下图所示：

2、再接着就是JS代码了，先写添加按钮的代码，代码如下图所示：

就是这样简单的代码就能实现添加了，用到appendTo()方法，是“添加到…‘的意思，上面代码就是将行的内容添加到div中。效果如下图所示：

3、实现了添加功能就来看看删除，代码如下图所示：

还是很简单的代码，通过一个last()方法选中最后一个元素，再通过一个remove()方法就将其删除了。效果如下图所示：

这样添加和删除就都完成了，但是这样太过于简单了，对项目的需求还是不够，所以下面就来优化一下，让添加的时候能有判断到多少行就不能添加，行数也根据判断改名，删除的时候，也加一个判断，不能删除第一行。

4、先优化添加功能，代码如下图所示：

图中代码显示获取到div行的长度，因为，获取长度的时候，不能先获取到原有的第一行，所以就重新加上一，再声明一个变量，用来表示第几行，再接着就是if…else判断，长度对应行数，再判断当长度小于3时才允许添加，否则就不能添加给出相应提示。

这样就让添加功能得到了优化，多了一些判断，让添加功能就没那么随便了，当然那些判断什么的都是可以改的，要看需求是怎样的，添加的内容也是可以随便改变的，这了是举例子，所以内容比较简单，当添加一些复杂的内容时，就需要注意到元素id的问题，因为id是唯一的，所以这个时候可以给id的后面加上行的长度，这样id就永远不会重复了，可能还有各种问题就需要具体看项目了，自己多多思考吧。

5、优化完了添加功能，下面再优化一下删除功能，代码如下图所示：

这个就简单的优化了一下，判断一下行的长度是否大于1，只有当行的长度大于1是，才能删除，否则不能删除给出相应提示。这里的children()方法是用来获取子元素的，也就是获取行的长度。下面看看效果，如下图所示：

可以看到效果就是这样了，这样删除功能也就得到了优化，删除起来就没那么随便了。

当然判断行的长度以外，还有很多判断，你也可以通过判断元素的id，删除对应的行，这样就能准确的删除想要删除的行，或者还能一次性删除多行，不是只删除一行，这些问题具体都要看项目的需求，需要自己多去思考。

以上就是添加和删除行的功能了，只是一个简单的例子方便学习和参考，具体在做项目的时候，还是要根据项目的需求改变的。