js添加删除元素

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>会议控制-报名管理-报名设置</title>

        <!-- bootstrap -->
        <link rel="stylesheet" id=‘style-bootstrap‘ href="assets/package/bootstrap/css/bootstrap.min.css">

        <!-- 主要样式 -->
        <link rel="stylesheet" id=‘style-style‘ href="assets/css/style.css">

        <!-- 让IE8支持HTML5元素和媒体查询-->
        <!-- Respond.js必须在网站环境里才可运行-->
        <!--[if lt IE 9]>
            <script src="assets/js/html5shiv.min.js"></script>
            <script src="assets/js/respond.min.js"></script>
        <![endif]-->

    </head>
    <body>

        <!-- 头部 -->
        <header id="header">
            <!-- 头部导航开始 -->
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="sr-only">显示导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><img src="assets/images/uee-logo2.png" title="优议"/></a>
                    </div>
                    <div class="collapse navbar-collapse navbar-ex1-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">首页</a></li>
                            <li><a href="#">发现会议</a></li>
                        </ul>
                        <!-- <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form> -->
                        <ul class="nav navbar-nav navbar-right">
                            <li><button type="button" class="btn btn-default navbar-btn"><a href="meet-release.html">创建会议</a></button></li>
                            <li><a href="#">右侧导航</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能列表<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="user-pro-huan.html">个人中心</a></li>
                                    <li><a href="res-info-info.html">资源平台</a></li>
                                    <li><a href="#">下拉菜单</a></li>
                                    <li><a href="#">下拉菜单</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- 头部导航结束 -->
        </header>
        <!-- 头部结束 -->

        <!-- 会议主形象开始 -->
        <div class="page-user-kv" id="kv">
            <div class="site-wrapper">
                <div class="site-wrapper-inner">
                    <div class="cover-container">
                        <div class="inner cover">
                            <div class="container">
                                <h1 class="cover-heading">GIEC2016第二届全球互联网经济大会</h1>
                                <p class="lead">
                                </p>
                                <div class="page-user-kv-meta">
                                    <span><i class="fa fa-users"></i>会议主办方:朗集/朗集/中科创 </span>
                                    <span><i class="fa fa-clock-o"></i>会议举办时间:2016年7月6日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 会议主形象结束 -->

        <!-- 主体开始 -->
        <main id="main">
            <!-- 用户管理第二大导航 -->
            <nav class="navbar navbar-default user-center-page-navigation" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="sr-only">显示导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="row">
                        <div class="collapse navbar-collapse navbar-ex1-collapse p0">
                            <ul class="nav navbar-nav">
                                <li ><a href="meet-basic-intro.html">基本管理</a></li>
                                <li><a href="meet-extend-invi.html">会议推广</a></li>
                                <li><a href="meet-host-zhu.html">举办方</a></li>
                                <li><a href="meet-res-select.html">资源管理</a></li>
                                <li class="active"><a href="meet-sign-join.html">报名管理</a></li>
                                <li><a href="meet-son-son.html">子账号</a></li>
                                <li><a href="meet-doc-all.html">文档管理</a></li>
                                <li><a href="meet-live-sign.html">现场管理</a></li>
                                <li><a href="meet-goout-ticket.html">出行管理</a></li>
                                <li><a href="meet-market-buy.html">应用市场</a></li>
                                <li><a href="meet-data-meet.html">数据统计</a></li>
                            </ul>
                            <!-- <ul class="nav navbar-nav navbar-right">
                                <li><button type="button" class="btn btn-default navbar-btn">发布会议</button></li>
                                <li><a href="#">右侧导航</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">下拉菜单</a></li>
                                        <li><a href="#">下拉菜单</a></li>
                                        <li><a href="#">下拉菜单</a></li>
                                        <li><a href="#">下拉菜单</a></li>
                                    </ul>
                                </li>
                            </ul> -->
                        </div>
                    </div>
                </div>
            </nav>
            <!-- 用户管理第二大导航 -->
            <!-- 用户页面 -->
            <div class="page-user">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 sidebar">
                            <!-- 用户侧边栏开始 -->
                            <div class="user-left">
                                <div class="panel panel-default">
                                  <div class="panel-heading">报名设置</div>
                                  <ul class="list-group">
                                    <a href="meet-sign-join.html" class="list-group-item"><li>参会人员管理</li></a>
                                    <a href="meet-sign-ticket.html" class="list-group-item"><li>门票设置</li></a>
                                    <a href="meet-sign-sign.html" class="list-group-item on"><li>报名设置</li></a>
                                    <a href="meet-sign-invi.html" class="list-group-item"><li>定制邀请函</li></a>
                                    <a href="#" class="list-group-item text-center">
                                        <img src="assets/images/weixin_qrcode_plus.png" alt="二维码" title="扫描二维码" class="imgline"/>
                                        <p>查看会议手机版专题页</p>
                                    </a>
                                    <a href="#" class="list-group-item text-center">
                                        <button class="btn btn-success">会议主站</button>
                                    </a>
                                  </ul>
                                </div>
                            </div>
                            <!-- 用户侧边栏结束 -->
                        </div>

                        <div class="col-md-9 page-user-right">

                            <!-- 用户右侧开始 -->
                            <div class="user-right">
                                <header>
                                    <div class="user-right-title">
                                        <h4>报名设置</h4>
                                    </div>
                                </header>

                                <!--单选钮-->
                                <!--<div class="row">
                                    <div class="col-md-4">
                                        <div class="radio radio-success">
                                            <input type="radio" name="radio1" id="radio1" value="option1" checked="checked">
                                            <label for="radio1">
                                                购票者
                                            </label>

                                        </div>
                                        <div><small>无论购买多少张票,只收集购票者信息</small></div>
                                    </div>

                                </div>-->
                                <!--单选钮-->

                                <div class="row pb0">
                                    <div class="col-md-9 pr0">
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="pad8">信息收集表单预览    带<span class="text-danger">*</span> 号的为必填项</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt3">
                                            <div class="col-md-2 pr0">
                                                <span class="b_font">姓名:</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="text" class="form-control" id="username" placeholder="请输入你的姓名">
                                            </div>
                                            <div class="col-md-1 b_font pl0 text-danger">
                                                *
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-2 pr0">
                                                <span class="b_font">邮箱:</span>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="email" class="form-control" id="email" placeholder="请输入你的邮箱">
                                            </div>
                                            <div class="col-md-1 b_font pl0 text-danger">
                                                *
                                            </div>
                                        </div>
                                        <div id="addAppend">

                                        </div>
                                        <!--<div class="row" id="">
                                            <div class="col-md-1 pr0">
                                                <small>手机:</small>
                                            </div>
                                            <div class="col-md-9">
                                                <input type="text" class="form-control" id="meet-title" placeholder="">
                                            </div>
                                            <div class="col-md-1 pl0">
                                                <button class="b_bont btn btn-danger btn-xs imgline">删除</button>
                                            </div>
                                        </div>-->
                                        <div class="row">
                                            <div class="col-md-12">
                                                <button class="btn btn-success mt">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3 pl0">
                                        <div class="bgc zb text-center">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="pad8">自定义选择收集项</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox1" type="checkbox" name="must" value="公司" onclick="che(this.id, this.value);">
                                                        <label for="checkbox1">
                                                                公司
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox2" type="checkbox" name="must" value="部门" onclick="che(this.id, this.value);">
                                                        <label for="checkbox2">
                                                            部门
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox3" type="checkbox" name="must" value="职务" onclick="che(this.id, this.value);">
                                                        <label for="checkbox3">
                                                            职务
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox4" type="checkbox" name="must" value="职称" onclick="che(this.id, this.value);">
                                                        <label for="checkbox4">
                                                            职称
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox5" type="checkbox" name="must" value="地址" onclick="che(this.id, this.value);">
                                                        <label for="checkbox5">
                                                            地址
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox6" type="checkbox" name="must" value="手机" onclick="che(this.id, this.value);">
                                                        <label for="checkbox6">
                                                            手机
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox7" type="checkbox" name="must" value="传真" onclick="che(this.id, this.value);">
                                                        <label for="checkbox7">
                                                            传真
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox8" type="checkbox" name="must" value="邮编" onclick="che(this.id, this.value);">
                                                        <label for="checkbox8">
                                                            邮编
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox9" type="checkbox" name="must" value="公司电话" onclick="che(this.id, this.value);">
                                                        <label for="checkbox9">
                                                            公司电话
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox10" type="checkbox" name="must" value="公司网站" onclick="che(this.id, this.value);">
                                                        <label for="checkbox10">
                                                            公司网站
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox11" type="checkbox" name="must" value="个人博客" onclick="che(this.id, this.value);">
                                                        <label for="checkbox11">
                                                            个人博客
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox12" type="checkbox" name="must" value="家庭电话" onclick="che(this.id, this.value);">
                                                        <label for="checkbox12">
                                                            家庭电话
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox13" type="checkbox" name="must" value="家庭住址" onclick="che(this.id, this.value);">
                                                        <label for="checkbox13">
                                                            家庭住址
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox14" type="checkbox" name="must" value="性别" onclick="che(this.id, this.value);">
                                                        <label for="checkbox14">
                                                            性别
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="bgc zb">
                                            <div class="row pb0">
                                                <div class="col-md-12">
                                                    <div class="checkbox checkbox-success pl25">
                                                        <input id="checkbox15" type="checkbox" name="must" value="年龄" onclick="che(this.id, this.value);">
                                                        <label for="checkbox15">
                                                            年龄
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--<div class="bgc zb">
                                            <div class="row">
                                                <div class="col-md-12 text-center mt">
                                                    <button class="btn btn-success" data-toggle="modal" data-target="#must">添加必填项</button>
                                                    <button class="btn btn-success">确定</button>
                                                </div>
                                            </div>
                                        </div>-->
                                    </div>
                                </div>
                            </div>
                            <!-- 用户右侧结束 -->

                            <!-- 模态框 -->
                                <div class="modal fade" id="must" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="myModalLabel">添加收集项名称</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col-md-2 pr0">
                                                        <div class="b_font">输入名称:</div>
                                                    </div>

                                                    <div class="col-md-5">
                                                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入名称">
                                                    </div>

                                                    <div class="col-md-1">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                                <button type="button" class="btn btn-primary">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <!-- 模态框 -->

                        </div>
                    </div>
                </div>
            </div>
            <!-- 用户页面结束 -->
        </main>
        <!-- 主体结束 -->

        <!-- 页脚开始 -->
        <footer id="footer">
            <div class="container uee-copyright">
                <div class="gomeet">
                    <a href="meet-release.html" class="btn">创建会议</a>
                </div>
                <div class="right">
                    <img src="assets/images/uee-logo.png" title="优议"/>
                    <p>Copyright©2016 <a href="#" class="uee">UEEPUB.com</a> 版权所有 津ICP备 10211262号 津ICP证 B1-20150298号</p>
                </div>
            </div>
        </footer>
        <!-- 页脚结束 -->

        <!-- script-jquery -->
        <script src="assets/js/jquery.min.js"></script>

        <!-- script-bootstrap -->
        <script src="assets/package/bootstrap/js/bootstrap.min.js"></script>

        <!-- script-bootstrap-superman bs扩展增强 -->
        <script src="assets/package/bootstrap/js/bootstrap.superman.js"></script>

        <script type="text/javascript">
            function che(id, nr){
                var str = document.getElementById(id);
                if (str.checked == true) {
                    addInput(id, nr);
                }else{
                    delInput(id)
                }
            }
            function addInput(id, nr){
                var rowDiv = $("<div class=‘row‘ id=‘addAppend"+id+"‘><div class=‘col-md-2 pr0‘><span class=‘b_font‘>"+nr+":</span></div><div class=‘col-md-8‘><input type=‘text‘ class=‘form-control‘ id=‘‘ placeholder=‘请输入你的"+nr+"‘></div><div class=‘col-md-1 b_font pl0 text-danger‘>*</div></div>");
                $("#addAppend").append(rowDiv);
                //id += 1;
            }
            function delInput(id){
                var addAppend = document.getElementById("addAppend");
                var div = document.getElementById("addAppend"+id);
                addAppend.removeChild(div);
            }
        </script>
    </body>
</html>
时间: 2024-10-12 03:16:15

js添加删除元素的相关文章

Jquery 动态添加删除元素 用js添加的元素无法删除问题

用jquery方法的绑定侦听和销毁来解决动态div的增加删除: 正确代码: <script type="text/javascript" > $(document).ready(function(){  bindListener(); }) function addimg(){  $("#mdiv").append('<div ><input type="file" name="img[]" /&

js数组 删除元素

一直在使用js相关的东西,但很少作总结,今天遇到操作js数组的一些问题,对js的数组有了更进一步的认识! 1.创建数组var array = new Array();var array = new Array(size);//指定数组的长度var array = new Array(item1,item2……itemN);//创建数组并赋值 2.取值.赋值var item = array[index];//获取指定元素的值array[index] = value;//为指定元素赋值 3.添加新元

集合遍历过程iterator, 添加删除元素报异常

list  set  遍历过程中添加或者删除元素,报异常. 使用iterator 也会报异常 ConcurrentModificationException remove只能用迭代器的remove,而不能用集合的remove方法,iterator的remove会维护索引的一致性 iterator it = list.iterator(); while(it.hasnext(0){ obj = it.next(); it.remove(); } 用java.util.concurrent中的类代替

jquery与js添加子元素

例如在select中添加option JQuery做法: <select id="myselect" name="myselect"> </select> $("#myselect").append('<option value="-1">请选择</option>'); js的做法:@参考文章 关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标

JS添加删除一组文本框并对输入信息加以验证

在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3折”等等,这是作为一组方案来执行的,但是并不确定一组方案中有几个子方案,所以,这里我用JS进行添加删除子方案,并要对方案输入的正确性加以判断,并且通过json传输写入数据库,这里我们主要写如果添加删除一组子项目和如果给每个文本框添加验证. 动态添加一组文本框: var countTable = 0;

JQuery 添加删除元素

<body><ul><ul/> <div><div></body> 1. 内部添加        加上去是父子关系 append  加到后面    prepend 加到前面 let li = $(“<li>我是内部添加</li>”) $("ul").append(li); 2. 外部添加    加上去是兄弟关系 let div = $(“<div>我是外部添加</div&g

js添加页面元素

js动态创建html元素需要使用到下面这些常见的js方法. getElementById();//返回带有指定 ID 的元素. getElementsByTagName();//返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组). getElementsByClassName();//返回包含带有指定类名的所有元素的节点列表. appendChild();//把新的子节点添加到指定节点. removeChild();//删除子节点. replaceChild();//替换子节点. i

添加删除元素(来自网络)

1.addClass:为指定的dom元素添加样式. 2.removeClass:删除指定dom元素的样式. 3.toggleClass:如果存在(不存在),就删除(添加)一个样式. 4.hasClass:判断样式是否存在. function hasClass(obj, cls) {     return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) {    

JS添加HTML元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>统计</title> <!-- 引入 echarts.js --> //要先加载echarts.js 之后再执行方法 不然会报错 <style> #main{ position: absolute; width: 600px; height: 400px; left: 50