Jquery动态添加及删除页面节点元素示例代码

  通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行。

  废话不多说,直接上代码!

  

复制代码 代码如下:

  <!doctype html>

  <html>

  <head>

  <meta charset="utf-8">

  <title>Jquery动态添加及删除页面节点</title>

  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><!--引用jqurey库文件-->

  <style>

  .container{ width:1000px; margin:0 auto;}

  .top{ height:25px; line-height:25px;}

  .top select{ width:80px; height:22px; line-height:22px;}

  .top input{ width:56px; height:22px;}

  .add{ line-height:30px;}

  li{ list-style:none;}

  span{cursor:pointer;}

  </style>

  <script>

  $(function(){//页面加载完毕后执行

  $("input").click(function(){//添加操作

  var getval=$("select").val();//获取当前选中的select值

  $("p").before('<li>'+getval+'<span>X</span></li>');//在p标签前加入所要生成的代码

  });

  });

  $("span").live("click",function(){//通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)

  $(this).parent().remove();//移除当前点击元素的父元素

  });

  </script>

  </head>

  <body>

  <div class="container">

  <div class="top">

  <select>

  <option>我是一号</option>

  <option>我是二号</option>

  <option>我是三号</option>

  <option>我是四号</option>

  <option>我是五号</option>

  </select>

  <input value="添 加" type="button"/>

  </div>

  <div class="add"><p></p></div>

  </div>

  </body>

  </html>