在页面上动态添加和删除【添加信息的文本框】

页面上的内容：

当点击添加或删除会做出相应的操作

页面的html代码

<li id="clid">
                           <div>
                                  姓名:<input type="text" name="guestName" class="dfinput" style=" 150px;"/>
                               &nbsp;&nbsp;&nbsp;&nbsp;国别:<input name="guestState" type="text" class="dfinput" style=" 150px;" >
                               &nbsp;&nbsp; 性别：&nbsp;&nbsp;<select name="guestSex">
                                                                   <option value="0">请选择</option>
                                                                   <option value="1">男</option>
                                                                   <option value="2">女</option>
                                                               </select>
                               &nbsp;&nbsp;&nbsp;&nbsp;单位<input type="text" name="gusetUnit" class="dfinput" style=" 150px;" />
                               &nbsp;&nbsp;&nbsp;&nbsp;职务职称：<input type="text" name="guestJob" class="dfinput" style=" 150px;" />
                               <input type="button" value="删除" onclick="del(this);"><input type="button" value="添加" onclick="add();">
                          </div>
                     </li>

实现动态添加和删除的js代码（jquery）

<script type="text/javascript">
    //动态添加外宾
    function add(){
        //获取要克隆的对象
        var cloneDiv=$("#clid div").eq(0);
        //克隆
        var newDiv=cloneDiv.clone();
        //添加
        //添加前清空值
        $("input[type='text']",newDiv).val("");        
        //添加
        newDiv.appendTo("#clid");

    }
    
    
    //删除
    function del(btn){
        //获取要删除的对象
        var delDiv=$(btn).parent();
        //当最后一个的时候不可删除
        var lastDiv=$("#clid div");
        if(lastDiv.length>1){
            delDiv.remove();
        }
    }
</script>