jquery 实现DOM节点增删+循环获取表单值 示例

交互：
1.点击“添加故障”：可添加多个故障，默认首次进入展示一条故障录入框，添加上限不限；点击“删除故障”，可删除最近一条故障，删除至仅有一个故障后，“删除故障”按钮消失；
2.点击“添加方案”：可添加多个方案，默认展示一个方案，添加上限不限；点击“删除”，可删除该方案，删除至仅有一个方案后，”删除“按钮消失。

图1 弹框初始样式

图2 点击几次”添加故障“按钮

图3 点击几次”添加绑定方案“按钮

图4 提交给后台的数据结构

相关html如下：add-fault.html

<div class="repair-fault-dialog">
    <div class="fault-box-list">
        <div class="fault-box js-item">
            <div class="fault-item">
                <p>
                    <label>故障ID：</label>
                    <input maxlength="32" name="faultId" type="text" placeholder="请填写故障ID">
                </p>
                <p>
                    <label>故障名称：</label>
                    <input maxlength="32" name="faultName" type="text" placeholder="请填写故障名称">
                </p>
                <button class="add-plan"><i class='iconfont icon-add'></i>添加绑定方案</button>
            </div>
            <div class="program-item js-program-item">
                <p>
                    <label>方案ID：</label>
                    <input maxlength="32" name="planId" type="text" placeholder="请填写方案ID">
                </p>
                <p>
                    <label>方案名称：</label>
                    <input maxlength="32" name="planName" type="text" placeholder="请填写方案名称">
                </p>
                <p>
                    <label>价格：</label>
                    <input maxlength="32" name="planPrice" type="text" placeholder="请填写价格">
                </p>
                <button class="delete-plan hide-btn">删除</button>
            </div>
        </div>
    </div>
    <div class="fault-btn-box">
        <p>
            <button class="fault-btn delete hide" id="delete-fault">删除故障</button>
            <button class="fault-btn" id="add-fault"><i class='iconfont icon-add'></i>添加故障</button>
        </p>
    </div>

</div>

相关js如下：

//事件绑定
$("body").on('click', '.repair-fault-dialog #add-fault', function() {//添加故障
	var html = '<div class="fault-box js-item">'+
	    '<div class="fault-item">'+
	        '<p>'+
	        '<label>故障ID：</label>'+
	        '<input maxlength="32" name="faultId" type="text" placeholder="请填写故障ID">'+
	        '</p>'+
	        '<p>'+
	        '<label>故障名称：</label>'+
	        '<input maxlength="32" name="faultName" type="text" placeholder="请填写故障名称">'+
	        '</p>'+
	        '<button class="add-plan"><i class="iconfont icon-add"></i>添加绑定方案</button>'+
	    '</div>'+
	    '<div class="program-item js-program-item">'+
	        '<p>'+
	        '<label>方案ID：</label>'+
	        '<input maxlength="32" name="planId" type="text" placeholder="请填写方案ID">'+
	        '</p>'+
	        '<p>'+
	        '<label>方案名称：</label>'+
	        '<input maxlength="32" name="planName" type="text" placeholder="请填写方案名称">'+
	        '</p>'+
	        '<p>'+
	        '<label>价格：</label>'+
	        '<input maxlength="32" name="planPrice" type="text" placeholder="请填写价格">'+
	        '</p>'+
	        '<button class="delete-plan hide-btn">删除</button>'+
	    '</div>'+
	    '</div>';
	$('.repair-fault-dialog .fault-box-list').append(html);
	$('.repair-fault-dialog #delete-fault').removeClass('hide');//显示删除按钮
	
}).on('click', '.repair-fault-dialog #delete-fault', function() {//删除故障
	$('.repair-fault-dialog .js-item').last().remove();
	if($('.repair-fault-dialog .js-item').length <= 1){
	    $('.repair-fault-dialog #delete-fault').addClass('hide');//隐藏删除按钮
	}
}).on('click', '.repair-fault-dialog .add-plan', function() {//添加绑定方案
	var html = '<div class="program-item js-program-item">'+
	        '<p>'+
	        '<label>方案ID：</label>'+
	        '<input maxlength="32" name="planId" type="text" placeholder="请填写方案ID">'+
	        '</p>'+
	        '<p>'+
	        '<label>方案名称：</label>'+
	        '<input maxlength="32" name="planName" type="text" placeholder="请填写方案名称">'+
	        '</p>'+
	        '<p>'+
	        '<label>价格：</label>'+
	        '<input maxlength="32" name="planPrice" type="text" placeholder="请填写价格">'+
	        '</p>'+
	        '<button class="delete-plan">删除</button>'+
	    '</div>';
	$(this).parents('.js-item').append(html);
	$(this).parents('.js-item').find('.js-program-item').first().find('.delete-plan').removeClass('hide-btn');
	
}).on('click', '.repair-fault-dialog .delete-plan', function() {//删除绑定方案
	if($(this).parents('.js-item').find('.js-program-item').length <= 2){
	    $(this).parents('.js-item').find('.delete-plan').addClass('hide-btn');//隐藏删除按钮
	}
	$(this).parent('.js-program-item').remove();
});

//获取用户输入表单值，并校验，包括故障id和方案id去重（故障id+方案id都不能重复）
function getParams() {
	var faultList = [], cache = {},formPass = true, isRepeat = false,
	    pricePass = true,idPass = true;
	$(".js-item").map(function(item){ //遍历故障
	    var planList = [],
	        $faultId = $(this).find("input[name='faultId']"),
	        $faultName = $(this).find("input[name='faultName']"),
	        numRgx = /^\d+$/,
	        idRgx = /^[0-9a-zA-Z]+$/;
	
	    if(!$faultId.val()){
	        formPass=false;
	        return
	    }else if(!idRgx.test($faultId.val())){
	        idPass=false;
	        return
	    }
	    if(!$faultName.val()){
	        formPass=false;
	        return
	    }
	    $(this).find(".js-program-item").map(function (innerItem) { //遍历方案
	        var $planId = $(this).find("input[name='planId']"),
	            $planName = $(this).find("input[name='planName']"),
	            $planPrice = $(this).find("input[name='planPrice']"),
	            priceRgx = /^(\d{1,7})(\.\d{1,2})?$/;
	
	        if(!$planId.val()){
	            formPass=false;
	            return
	        }else if(!idRgx.test($planId.val())){
	            idPass=false;
	            return
	        }
	        if(!$planName.val()){
	            formPass=false;
	            return
	        }
	        if(!$planPrice.val()){
	            formPass=false;
	            return
	        }else if(!priceRgx.test($planPrice.val())){
	            pricePass = false;
	            return
	        }
	        if(cache[$planId.val()]){ //planId去重
	            isRepeat = true;
	            return
	        }else {
	            cache[$planId.val()] = true;
	        }
	        planList.push({
	            planId: $planId.val(),
	            planName: $planName.val(),
	            planPrice: $planPrice.val(),
	        });
	    });
	    if(cache[$faultId.val()]){ //faultId去重
	        isRepeat = true;
	        return
	    }else {
	        cache[$faultId.val()] = true;
	    }
	    faultList.push({
	        faultId: $faultId.val(),
	        faultName: $faultName.val(),
	        planList: planList
	    });
	});
	
	if(isRepeat) {
	    Util.alertMessage('故障ID、方案ID不可重复！');
	    return false;
	}
	if(!formPass) {
	    Util.alertMessage('表单不能为空，请填写完整！');
	    return false;
	}
	if(!idPass) {
	    Util.alertMessage('故障ID、方案ID仅支持录入数字、字母！');
	    return false;
	}
	if(!pricePass) {
	    Util.alertMessage('价格最多7位整数、2位小数！');
	    return false;
	}
	return faultList;
}
//提交表单
function addFault(categoryId){

...

	//点击弹框”保存“按钮时
	var faultList = getParams();
	if(!faultList){
	   return
	}
	
	$.ajax({
	   url: API.insertFaultAndPlan,
	   type: 'POST',
	   data: JSON.stringify({faultList:faultList}),
	   contentType: 'application/json',
	   success(data) {
	       ...
	   }
	});
}

相关scss如下：

//故障弹框
.repair-fault-dialog {
  button {
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    &:hover {
      border: 1px solid #57aeff;
      color: #57aeff;
    }
  }
  .fault-box-list {
    max-height: 463px;
    overflow-y: auto;
    .fault-box {
      border-bottom: 1px solid #eee;
      font-size: 14px;
      color: #666;
      &:first-child {
        margin-top: 0;
      }
      .fault-item {
        height: 32px;
        line-height: 32px;
        margin-top: 20px;
        margin-bottom: 20px;
        p {
          display: inline-block;
          margin-right: 25px;
          float: left;
          label {
            float: left;
          }
          input[type="text"] {
            width: 120px;
          }
        }
        button {
          width: 120px;
          height: 32px;
          i {
            margin-right: 5px;
          }
        }
      }
      .program-item {
        height: 32px;
        line-height: 32px;
        margin-bottom: 20px;
        p {
          display: inline-block;
          margin-right: 25px;
          float: left;
          label {
            float: left;
          }
          input[type="text"] {
            width: 120px;
          }
        }
        button {
          width: 70px;
          height: 32px;
          &.hide-btn {
            display: none;
          }
          i {
            margin-right: 5px;
          }
        }
      }
    }
  }
  .fault-btn-box{
    height: 32px;
    margin-bottom: 10px;
    p{
      float: right;
      .fault-btn{
        width: 90px;
        height: 32px;
        margin-top: 20px;
        &.delete{
          margin-right: 15px;
        }
        &.hide{
          display: none;
        }
      }
    }
  }
  .no-data{
    text-align: center;
  }

}