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 ...
随机推荐
- WCF TCP通信方式 通过IIS承载调试
http://www.cnblogs.com/nikymaco/archive/2012/10/08/2715954.html IIS Express服务器只支持http/https,不支持net.t ...
- DCDC电路电感和电容啸叫的原因
电感啸叫原因 如果耳朵能听到啸叫(吱吱声),可以肯定电感两端存在一个20HZ-20KHZ(人耳范围)左右的开关电流. 例如DC-DC电路的电感啸叫,由于负载电流过大 DC内部有一个限流保护电路,当负载 ...
- 转：HDMI介绍与流程
HDMI介绍与流程 HDMI,全称为(High Definition Multimedia Interface)高清多媒体接口,主要用于传输高清音视频信号. HDMI引脚: HDMI有A,B,C, ...
- Java 加载器
类的加载是由类加载器完成的,类加载器包括: 根加载器( BootStrap ).扩展加载器( Extension ).系统加载器( System )和用户自定义类加载器( java.lang.Clas ...
- Xenomai 3 migration
Xenomai 3 的rtdm驱动更像一般的Linux驱动,named device会在/dev/rtdm/xxx创建一个设备文件.而用户空间使用时,写得来也和Linux的一般char设备相似,ope ...
- CString 成员函数用法大全(转)
CString( );例:CString csStr; CString( const CString& stringSrc );例:CString csStr("ABCDEF中文12 ...
- iOS文档预览功能教程
本文转载至 http://blog.csdn.net/devday/article/details/6580444 文档iosuinavigationcontrollerextensionmic ...
- 九度OJ 1020：最小长方形 （基础题）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6019 解决:2849 题目描述: 给定一系列2维平面点的坐标(x, y),其中x和y均为整数,要求用一个最小的长方形框将所有点框在 ...
- UIWebview加载H5界面侧滑返回上一级
一.UIWebview的发现 问题发现:当UIWebview王深层次点击的时候,返回时需要webView执行goBack方法一级一级返回,这样看到的webView只是在该界面执行刷新,并看不到类似iO ...
- 通过主机名来获取一个ip对象
//通过名称(ip字符串or主机名)来获取一个ip对象. InetAddress ip = InetAddress.getByName("www.baidu.com");//jav ...