动态删除、添加div

最新推荐文章于 2022-09-29 16:00:19 发布

bonnie_zxb

最新推荐文章于 2022-09-29 16:00:19 发布

阅读量564

点赞数

分类专栏：前端学习总结文章标签： js 前端

本文链接：https://blog.csdn.net/baidu_16258003/article/details/82465701

版权

前端学习总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<?php
use yii\helpers\Html;
?>
<div class="form">
    <form id="w0" action="create" method="get">
      <div id="label-group">
        <div class="form-group" id="1">
            <label class="control-label">选项列表1</label>
            <input type="text" id="k1" name="labelk1" maxlength="255" style="width:50px;" placeholder="序号">
            <input type="text" id="v1" name="labelv1" maxlength="255" style="width:500px;" placeholder="选项文字内容">
        </div>
        <div class="form-group" id="2"> 
            <label class="control-label">选项列表2</label> 
            <input type="text" id="k2" name="labelk2" maxlength="255" style="width:50px;" placeholder="序号">  
            <input type="text" id="v2" name="labelv2" maxlength="255" style="width:500px;" placeholder="选项文字内容">      
            <button type="button"  id="del" οnclick="del_div()">删除</button>  
            <button type="button"  id="add" οnclick="add_div()">新增</button?
        </div>
      </div>
      <div class="form-group">
         <button type="submit">添加</button>
       </div>         
    </form>
</div>

<?php

$js=<<<JS

window.add_div =  function () {
    var add = document.getElementById('add');
    var del = document.getElementById('del');
    var child = document.getElementById('label-group').children;
    var container_id = child[child.length-1].id;
    var container = document.getElementById(container_id);
    var new_id = parseInt(container_id)+1;
    var node=container.nextSibling;
    //去掉两个button
    container.removeChild(add);
    container.removeChild(del);
    oDiv = document.createElement('div');
    var id = new_id;
    oDiv.setAttribute('id',id);
    oDiv.setAttribute('class','form-group');
    oDiv.innerHTML = "<label class='control-label'>选项列表"+id+"</label>"+
            "<input type='text' id='label_k["+id+"]' name='label_k["+id+"]' maxlength='255' style='width:50px;margin-left:3px;' placeholder='序号'>"+
            "<input type='text' id='k"+id+"' name='v"+id+"' maxlength='255' style='width:500px;' placeholder='选项文字内容'>"+
            "<button type='button' id ='del' οnclick='del_div()'>删除</button>"+
            "<button type='button' id ='add' οnclick='add_div()'>新增</button>";
    container.parentNode.insertBefore(oDiv, node)
    node=oDiv.nextSibling;
}

window.del_div =  function () {
    var del = document.getElementById('del');
    var parent = document.getElementById('label-group');
    var child = document.getElementById('label-group').children;
    //最后一个选项列表id
    var del_container_id = child[child.length-1].id;
    if(del_container_id == 1){
        alert("仅剩一个选项，不允许删除！");
        return;
    }
    var del_container= document.getElementById(del_container_id);
    //去掉最后一个div选项列表
    parent.removeChild(del_container);
    
    //获取新的最后一个div_id
    var child_new = document.getElementById('label-group').children;
    var container_id_new = child_new[child_new.length-1].id;
    $("#"+container_id_new).append(
        "<button type='button' id ='del' οnclick='del_div()'>删除</button>"+
        "<button type='button' id ='add' οnclick='add_div()'>新增</button>"
        );
    
}

JS;
$this->registerJs($js);
?>