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 ...
随机推荐
- leetCode 95.Unique Binary Search Trees II （唯一二叉搜索树） 解题思路和方法
Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...
- 《C专家编程》数组和指针并不同--多维数组
<C专家编程>数组和指针并不同 标签(空格分隔): 程序设计论著笔记 1. 背景理解 1.1 区分定义与声明 p83 声明相当于普通声明:它所说明的并不是自身,而是描写叙述其它地方创建的对 ...
- jxl切割excel文件
近期在实施一个项目.当中一项工作是处理历史数据. 客户提供过来的数据是excel表格,超过20万条记录,因为目标系统导入限制,每次仅仅能导入大小不超过8M的文件.所以须要对这些数据进行切割处理.在手工 ...
- 【Java】事件驱动模型和观察者模式
你有一件事情,做这件事情的过程包含了许多职责单一的子过程.这样的情况及其常见.当这些子过程有如下特点时,我们应该考虑设计一种合适的框架,让框架来完成一些业务无关的事情,从而使得各个子过程的开发可以专注 ...
- Android之怎样全屏显示
三种方法: 1 自己定义主题(见设置自己定义样式和主题一节) http://blog.csdn.net/wei_chong_chong/article/details/47438907 2 使用系统自 ...
- Web网页开发常见经典问题
1.网络请求参数共享 转发dispatcher和重定向redirect 对于参数共享的区别 Redirect和Dispatcher 区别
- 使用Erlang和Thrift，与Hbase通信（转）
操作系统是Ubuntu Server 12.10 先安装Thrift sudo apt-get install libboost-dev libboost-test-dev \ libboost-pr ...
- 2015最流行的Android组件、工具、框架大全（转）
转自:2015最流行的Android组件.工具.框架大全 Android 是目前最流行的移动操作系统之一. 随着新版本的不断发布, Android的功能也日益强大, 涌现了很多流行的应用程序, 也催生 ...
- 多媒体开发之sps---解析sps得到图像的宽高
(1)通过块的宽高解析出真个h264的分辨率 如何解析SDP中包含的H.264的SPS和PPS串 http://www.pernet.tv.sixxs.org/thread-109-1-1.html ...
- java jdbc oracle ORA-01795: 列表中的最大表达式数为 1000
在操作SQL中存在In的数量如果超过1000条会提示 ORA-01795: 列表中的最大表达式数为 1000 归纳有几种方式出现的: 第一种是:我在上一个 [jdbc 同时执行 查询和删除操]作中 ...