Jquery动态添加及删除页面节点元素示例代码_Javascript教程-查字典教程网
Jquery动态添加及删除页面节点元素示例代码
Jquery动态添加及删除页面节点元素示例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行。废话不多说,直接上代码!复制代码代码如下: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><>

<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>

<div>

<select>

<option>我是一号</option>

<option>我是二号</option>

<option>我是三号</option>

<option>我是四号</option>

<option>我是五号</option>

</select>

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

</div>

<div><p></p></div>

</div>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类