js添加删除元素
Posted 上官靖宇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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">×</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>
以上是关于js添加删除元素的主要内容，如果未能解决你的问题，请参考以下文章