layui动态添加和删除html内容

效果图

**功能描述：**点击新增按钮，该table之后新增一个同样的table，点击删除按钮删除当前table，只有一个时不能再删除。

html模板内容

<table border="1" class="layui-table">
   <tr>
        <td>问题描述</td>
        <td>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline" style="width: 40px;">
                        <button id="add-question-btn" type="button"
                                class="layui-btn layui-btn-sm layui-btn-radius"
                                onclick="addQuestion(this)">
                            <i class="layui-icon"></i>新增
                        </button>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline" style="width: 40px;">
                        <button id="del-question-btn_0" type="button"
                                class="layui-btn layui-btn-sm layui-btn-radius"
                                onclick="checkDelQuestion(this)">
                            <i class="layui-icon"></i>删除
                        </button>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td style="text-align: center">问题<span style="color: red">*</span></td>
        <td>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input id="question_0" name="questionTitle" type="text" style="padding-left: 0;" class="layui-input" />
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td style="text-align: center">问题描述<span style="color: red">*</span></td>
        <td>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input id="questionDescription_0" name="questionDescription" type="text" class="layui-input"/>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td style="text-align: center">附件上传</td>
        <td>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-block" style="width:800px">
                        <input id="questionFileCode_0" name="questionFileCode" type="text" readonly
                               placeholder="" autocomplete="off" class="layui-input"  hidden>
                        <input id="questionFileName_0" name="questionFileName" type="text" readonly
                               placeholder="" autocomplete="off" class="layui-input" >
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="question_upload_0" name="question_upload_btn" type="button"
                            class="layui-btn layui-btn-sm layui-btn-radius">
                        <i class="layui-icon"></i>上传附件
                    </button>
                </div>
            </div>
        </td>
    </tr>
</table>

js代码

// 新增方法
function addQuestion(obj) {
    var table = $(obj).parent().parent().parent().parent().parent().parent();
    var newTable = table.clone();
    // 清空新table
    newTable.find(":input").each(function(){
        $(this).val("");
    });
    table.after(newTable);
    // 遍历html中该name值的所有input标签，并设置标签的id属性值
    $("input[name='questionTitle']").each(function (i) {
        $(this).attr("id","question_"+i);
    });
    $("input[name='questionDescription']").each(function (i) {
        $(this).attr("id","questionDescription_"+i);
    });
    $("input[name='questionFileCode']").each(function (i) {
        $(this).attr("id","questionFileCode_"+i);
    });
    $("input[name='questionFileName']").each(function (i) {
        $(this).attr("id","questionFileName_"+i);
    });
    $("button[name='question_upload_btn']").each(function (i) {
        $(this).attr("id","question_upload_"+i);
        // 初始化每个table的上传附件按钮
        initSimpleUpload("question_upload_"+i, "consultOrder-form", "questionFileCode_" + i, "questionFileName_"+i);
    });
    $("button[id='del-question-btn_0']").each(function (i) {
        $(this).attr("id","del-question-btn_"+i);
    });
}

// 删除方法
function checkDelQuestion(obj) {
    var arr = obj.id.split("_");
    if(arr[1] == 0){
        layer.alert("该行已是第一行，无法删除！")
        return false;
    }else{
        $(obj).parent().parent().parent().parent().parent().parent().remove();
        // 删除后重新遍历，给html的input的id属性赋值
        $("input[name='questionTitle']").each(function (i) {
            $(this).attr("id","question_"+i);
        });
        $("input[name='questionDescription']").each(function (i) {
            $(this).attr("id","questionDescription_"+i);
        });
        $("input[name='questionFileCode']").each(function (i) {
            $(this).attr("id","questionFileCode_"+i);
        });
        $("input[name='questionFileName']").each(function (i) {
            $(this).attr("id","questionFileName_"+i);
        });
        $("button[name='question_upload_btn']").each(function (i) {
            $(this).attr("id","question_upload_"+i);
            initSimpleUpload("question_upload_"+i, "consultOrder-form", "questionFileCode_" + i, "questionFileName_"+i);
        });
        $("button[id='del-question-btn_0']").each(function (i) {
            $(this).attr("id","del-question-btn_"+i);
        });
    }
}

// 遍历获取多个table中的值
function getQuestionArrayData(type) {
    if(type == 1){
        $("input[name='questionTitle']").each(function () {
            questionTitleStrArr.push($(this).val());
        });
        $("input[name='questionDescription']").each(function () {
            questionDescriptionStrArr.push($(this).val());
        });
        $("input[name='questionFileCode']").each(function () {
            questionFileCodeStrArr.push($(this).val());
        });
        $("input[name='questionFileName']").each(function () {
            questionFileNameStrArr.push($(this).val());
        });
    } else {
        $("input[name='questionTitle2']").each(function () {
            questionTitleStrArr.push($(this).val());
        });
        $("input[name='questionDescription2']").each(function () {
            questionDescriptionStrArr.push($(this).val());
        });
        $("input[name='questionFileCode2']").each(function () {
            questionFileCodeStrArr.push($(this).val());
        });
        $("input[name='questionFileName2']").each(function () {
            questionFileNameStrArr.push($(this).val());
        });
    }
}

上传附件方法 initSimpleUpload() 参考我另一篇博客：
layui上传多个附件且能删除附件