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 ...
随机推荐
- AWS上的游戏服务：Lumberyard + Amazon GameLift + Twitch
开发一款世界级的游戏是一个非常困难,耗时和昂贵的过程.如今的游戏玩家要求越来越苛刻,他们希望既能够通过各种不同的终端设备来进行游戏 ,又要求游戏具有社交的功能. 因为此类游戏的开发期和推广期都非常长. ...
- iPhone换电池是原装电池好还是换第三方大容量电池好？
转:https://www.xianjichina.com/news/details_60791.html 最近这段时间苹果降速门事件持续发酵,闹得满城风雨.尽管苹果公司两次致歉,很多果粉都去更换电池 ...
- linux安装svn客户端subversion及使用方法
1.下载 [maintain@HM16-213 software]$ wget http://subversion.tigris.org/downloads/subversion-deps-1.6.1 ...
- mysql 让一个存储过程定时作业的代码（转）
1.在mysql 中建立一个数据库 test1 语句:create database test1 2.创建表examinfo create table examinfo( id int auto_in ...
- 02-cookie案例-显示用户上次访问网站的时间
package cookie; import java.io.IOException;import java.io.PrintWriter;import java.util.Date; import ...
- 百度富文本编辑器Ueditor上传图片时标签中添加宽高
ueditor.all.js中:直接搜索callback() function callback(){ try{ var link, json, loader, body = (iframe.cont ...
- c 字符串 函数
c编辑 strcpy 原型:extern char *strcpy(char *dest,char *src); 用法:#include <string.h> 功能:把src所指由NUL结 ...
- 初探swift语言的学习笔记四－2(对上一节有些遗留进行处理)
作者:fengsh998 原文地址:http://blog.csdn.net/fengsh998/article/details/30314359 转载请注明出处 假设认为文章对你有所帮助,请通过留言 ...
- 远程访问(post 传参数) 以及IOUtils复制文件
package com.action; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream ...
- 九度OJ 1058：反序输出 （基础题）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:8454 解决:3042 题目描述: 输入任意4个字符(如:abcd), 并按反序输出(如:dcba) 输入: 题目可能包含多组用例,每组用例 ...