关灯
开启左侧

操作DOM的一个示例,添加删除节点

[复制链接]
doubleyong 发表于 2019-3-5 11:43:35 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
3.jpg
需求: 水平线下面的显示所有类型,用户可以点击+,进行添加。添加的类型,显示在水平线上面。添加后类型,用户可以选择删除。写了一个DEMO,代码如下:
样式:
  1. <style>
  2.         ul li{
  3.             height: 100px;
  4.             width: 100px;
  5.             border: 1px solid black;
  6.             float:left;
  7.             list-style-type: none;
  8.         }
  9.         .add,.del{
  10.             font-size: 20px;
  11.         }
  12.     </style>
复制代码
页面与js

  1. <body>
  2. <div id="divBind">
  3.     <ul id="ulBind">
  4.     </ul>
  5. </div>
  6. <div style="clear:both;"></div>
  7. <hr/>
  8. <div id="divType">
  9.     <ul>
  10.         <li>类型01<span class="add">+</span></li>
  11.         <li>类型02<span class="add">+</span></li>
  12.         <li>类型03<span class="add">+</span></li>
  13.         <li>类型04<span class="add">+</span></li>
  14.         <li>类型05<span class="add">+</span></li>
  15.     </ul>
  16. </div>
  17. <script src="js/jquery-1.11.3.js"></script>
  18. <script type="text/javascript">
  19.     var liArr = [];
  20.     window.onload=function(){
  21.         $("#divType").on("click",".add",function(){
  22.             var newLi = $(this).parent().clone(true);
  23.             newLi.find("span.add").text("-");
  24.             newLi.find("span.add").removeClass("add").addClass("del");
  25.             console.log(newLi[0]);
  26.             $("#ulBind").append(newLi[0]);
  27.             liArr.push(newLi[0]);
  28.         });
  29.         $("#ulBind").on("click",".del",function() {
  30.             var currentLi =  $(this).parent();
  31.             for(var i=0;liArr.length;i++){
  32.                 if(liArr==currentLi[0]){
  33.                     liArr.splice(i,1);
  34.                     currentLi.remove();
  35.                     break; //跳出循环
  36.                 }
  37.             }
  38.         });
  39.     }
  40. </script>
  41. </body>
复制代码


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )