JQuery添加删除标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="../css/JQ08_24_04.css">
<title>添加标签</title>
</head>
<body>
<div>
<a href="javascript: return false">标签<span>X</span></a>
</div>
<input type="button" value="添加标签">
<script src="../js/JQ08_24_04.js"></script>
</body>
</html>
css
______________________________________________________
*{margin: 0;padding: 0}
a{text-decoration: none}
div{
background: #e2e2e2;
height: 500px;
}
a{
position: relative;
display: block;
width: 80px;
height: 30px;
line-height: 30px;
color: white;
background: green;
text-align: center;
margin: 0 5px;
float: left;
}
span{
position: absolute;
color: red;
right: 5px;
}
js
_________________________________________________________
$(function () {
$("input").click(function () {
$("div").append("<a href='javascript: return false'>标签<span>X</span></a>");
});
//事件委托至document，利用on()给所有未渲染的标签绑定click事件，冒泡传递给document
$(document).on("click","span",function () {
var i = $(this).index();
$("a").eq(i).remove();
})
});
JQuery添加删除标签的更多相关文章
- jQuery添加删除元素
$(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...
- 分别使用原生js和jQuery添加/删除元素的class属性
一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...
- jQuery添加删除节点例子第十节"员工增删表"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jQuery 添加 删除 改动select option
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
- jQuery添加/删除元素
jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容(仍然该元素的内部). 追加前:<p>这是一个文本段落</p> $(" ...
- jQuery添加删除
//代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...
- jQuery添加/删除Select的Option项
使用语法1. $("#select_id").append("<option value='Value'>Text</option>") ...
- jquery 添加html标签
<script type="text/javascript"> var sss = 1; function addFile() { if (sss < 20) { ...
- jQuery 增加 删除 修改select option .
jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...
随机推荐
- Windows Thin PC体验 & 语言包更改（win 7 included）
本作品由Man_华创作,采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.基于http://www.cnblogs.com/manhua/上的作品创作. 简介: Window ...
- js向后台传递对象
js: }; $.ajax({ url: "/.../...", type: "POST", async: false, data: JSON.stringif ...
- C#高级编程---暂停计划
学了两个半月的C#高级编程这本书,看到了第三部分,说实话,我有点怂了,我认怂,临时先放一下,博客暂停,由于我的水平确实不会了,在写下去也是自欺欺人,我决定先研究研究我比較喜欢的脚本语言JS,開始写的, ...
- cheap louis vuitton outlet
<h1>louis vuitton outlet store</h1>2 nigerian networking systems chosen seeing that enem ...
- HTML5 2D平台游戏开发#1
在Web领域通常会用到一组sprite来展示动画,这类动画从开始到结束往往不会有用户参与,即用户很少会用控制器(例如鼠标.键盘.手柄.操作杆等输入设备)进行操作.但在游戏领域,sprite动画与控制器 ...
- 浅谈java反序列化工具ysoserial
前言 关于java反序列化漏洞的原理分析,基本都是在分析使用Apache Commons Collections这个库,造成的反序列化问题.然而,在下载老外的ysoserial工具并仔细看看后,我发现 ...
- 【转载】【selenium+Python WebDriver】之selenium的定位以及切换frame（iframe）
感谢CSDN:huilan_same大神 网页地址:http://blog.csdn.net/huilan_same/article/details/52200586
- hdu 5538 House Building（长春现场赛——水题）
题目链接:acm.hdu.edu.cn/showproblem.php?pid=5538 House Building Time Limit: 2000/1000 MS (Java/Others) ...
- go test 下篇
前言 go test 上篇 给大家介绍了golang自带的测试框架,包括单元测试和性能测试.但是在实际生产中测试经常会遇到一些网络或者依赖的第三方系统接口,运行测试用例的时候希望忽略这些接口的实际依赖 ...
- Java 学习 day01
1. 基本常识 2. Java的跨平台性 3. Java环境搭建(安装) 4. Java环境搭建(环境变量配置) 5. Java环境搭建(环境变量配置技巧) 6. Java环境搭建(环境变量临时配置方 ...