動態表單添加一行，刪除一行

效果圖

 

html部分

<form class="cus-form" id="form">
        <div class="padding20 bgWhite marginTop20">
            <div class="container form-horizontal form-box">
                <div id="enuParams">

                </div>
            </div>
        </div>
</form>

js部分

<script type="text/javascript">

    var enuParam_index = 1;
    $(function() {

        var enuParam = "<div id='enuParam_"+enuParam_index+"' class='row'>" +
            "<div class='form-item col-sm-5 topAndBottom'>" +
            "<label class='col-sm-6 control-label'> 枚舉值： </label>" +
            "<div class='col-sm-6'>" +
            "<input type='text' class='form-control input-sm value_a' placeholder='請填寫枚舉值' name='enu_value' maxlength='32'>" +
            "</div>" +
            "</div>" +
            "<div class='form-item col-sm-4 topAndBottom'>" +
            "<label class='col-sm-4 control-label'>枚舉名稱： </label>" +
            "<div class='col-sm-8'>" +
            "<input type='text' class='form-control input-sm' placeholder='請填寫枚舉名稱' name='enu_name' maxlength='32'>" +
            "</div>" +
            "</div>" +
            "<div class='form-item col-sm-2 topAndBottom'>" +
            "<div class='col-sm-12'>" +
            "<span id='add' type='button' class='btn stockBtn'>+</span>" +
            "<span onclick='del_enuParam(id)' id='del_enuParam_"+enuParam_index+"' type='button' class='btn stockBtn'>-</span>" +
            "</div>" +
            "</div>" +
            "</div>";
        $("#enuParams").append(enuParam);

        enuParam_index++;
    });

    //添加配置枚舉
    // var addrow = document.getElementById("enuParam").outerHTML;

    $(document).on("click", "#add", function(){
        var enuParam = "<div id='enuParam_"+enuParam_index+"' class='row'>" +
            "<div class='form-item col-sm-5 topAndBottom'>" +
            "<label class='col-sm-6 control-label'> 枚舉值： </label>" +
            "<div class='col-sm-6'>" +
            "<input type='text' class='form-control input-sm value_a' placeholder='請填寫枚舉值' name='enu_value' maxlength='32'>" +
            "</div>" +
            "</div>" +
            "<div class='form-item col-sm-4 topAndBottom'>" +
            "<label class='col-sm-4 control-label'>枚舉名稱： </label>" +
            "<div class='col-sm-8'>" +
            "<input type='text' class='form-control input-sm' placeholder='請填寫枚舉名稱' name='enu_name' maxlength='32'>" +
            "</div>" +
            "</div>" +
            "<div class='form-item col-sm-2 topAndBottom'>" +
            "<div class='col-sm-12'>" +
            "<span id='add' type='button' class='btn stockBtn'>+</span>" +
            "<span onclick='del_enuParam(id)' id='del_enuParam_"+enuParam_index+"' type='button' class='btn stockBtn'>-</span>" +
            "</div>" +
            "</div>" +
            "</div>";
        $("#enuParams").append(enuParam);
        enuParam_index++;


    });

    function del_enuParam(id){
        var aa = id.split("_")
        var ids = aa[1]+"_"+aa[2]
        //alert(id)
        //alert(ids)
        var enuParams = document.getElementById("enuParams")
        if(enuParams.childNodes.length>2){
            enuParams.removeChild(document.getElementById(ids))
        }else{
            layer.alert("至少保留一個");
        }
    }


</script>

 -----------------------------------------------

刪除一行的另一種寫法

$(document).on("click", "#delete_1_0", function(){
              if($("#param_1_1_0 .row").length=="1"){
  　　　　　　return;
　　　　}else{
　　　　　　if($(this).parent().parent("#param_1_1_1_0:first-child").attr("id")=="param_1_1_1_0"){
　　　　　　　　return;
　　　　　　}else{
　　　　　　　　$(this).parent().parent().remove();
　　　　　　　　}
　　　　　　}
　　});