html 克隆页面上的内容,实现增删执行步骤的功能

1.前端html代码编写

<fieldset class="layui-elem-field" style="background-color: #69BD69">
    <div class="layui-form-item" style="margin-top: 17px;">
      <label for="execution_script_type" class="layui-form-label" style=" 120px">
          <span class="x-red">*</span>执行任务类型
      </label>
      <div class="layui-input-inline" style=" 380px;">
          <select id="execution_script_type" name="execution_script_type" style="height: 38px;">
                {% for execution_script_type in script_type_list %}
                    <option value="{{ execution_script_type.script_name }}">{{ execution_script_type.script_name }}</option>
                {% endfor %}
          </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label for="script_parameter" class="layui-form-label" style=" 120px">
          <span class="x-red">*</span>传递脚本参数
      </label>
      <div class="layui-input-inline" style=" 380px;">
          <input class="layui-input" id="script_parameter" name="script_parameter" placeholder="参数1 参数2 ...">
      </div>
      <div class="layui-form-mid layui-word-aux" style=" 450px">
          <span style="color: firebrick">【注意】多个参数用空格隔开,脚本不需要传递参数则默认为空即可</span>
      </div>
    </div>
    <input class="layui-btn" style=" 100px;background-color: #08a294" value="添加步骤" onclick="add_fs(this)"/>
    <input class="layui-btn" style=" 100px;background-color: #c38e32" value="删除步骤" onclick="del_fs(this)"/>
</fieldset>

2.javascript代码编写

<script>
    //添加步骤
    function add_fs(obj) {
        var fieldset = $(obj).parent();
        fieldset.after(fieldset.clone());
    }
    //删除步骤
    function del_fs(obj) {
        $(obj).parent().remove();
    }
</script>
原文地址:https://www.cnblogs.com/chenjw-note/p/12929767.html