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 ...
随机推荐
- sql数据分页
方法一.直接限制返回区间 (只适应于mysql) SELECT * FROM table WHERE 查询条件 ORDER BY 排序条件 LIMIT ((页码-1)*页大小),页大小; 优点:写法简 ...
- RSA非对称算法实现HTTP密码加密传输
目前一般帐号系统,都是https来传输账户性息,申请一个https证书也不贵.但是网站的其它功能并不需要走https协议,https和http混布比较麻烦,所以决定先实现一个http协议传输RSA非对 ...
- 敏捷DoD完毕定义的多种形态
作者:张克强 作者微博:张克强-敏捷307 关于Definition of Done 完毕的定义 在以往的说法中,常见用 退出标准 , 完毕条件.成功标准,等等 在敏捷软件开发中,存在多级的不同 ...
- 在4x4的棋盘上摆满了黑白棋子，黑白两色的位置和数目随机其中左上角坐标为(1,1),右下角坐标为(4,4),现在依次有一些翻转操作，要对一些给定支点坐标为中心的上下左右四个棋子的颜色进行翻转，请计算出翻转后的棋盘颜色。
// ConsoleApplication10.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream& ...
- JQ动态获取数据
转:JQUERY获取浏览器窗口的高度和宽度 June 27, 2012 <script type="text/javascript"> $(document).read ...
- 将到来的战略转变：移动 Web 还是移动 Apps？
目前来看,移动应用比移动网站的易用性更高,但变化即将发生,移动网站最终将优于Apps,成为更好的策略选择. 一家公司制定移动策略时,最重要的问题是:是否需要考虑为移动设备特别做点什么.一些公司永远都不 ...
- ASP.NET动态网站制作（6）-- JS（1）
前言:JS的第一节课,在Visual Studio 2013中编写及运行.新建项目->Web->ASP.NET Web应用程序->Empty,打开后在项目下添加新建css文件夹和js ...
- MongoDB安装配置(Windows)
官网下载:https://www.mongodb.com/ 百度经验:https://jingyan.baidu.com/article/d5c4b52bef7268da560dc5f8.html 官 ...
- 点击textbox弹出对话框，返回弹出对话框的值
主要是在父页面使用 function PopupWindow() { window.open(url, "", "status=no,resizab ...
- OIer同样是音乐家
烦闷的时候,shenben为大家准备了2首歌(不用耳机也能听哦) 只需把代码复制到dev-c++的编辑器上,轻按F11,然后聆听OIer的音乐…… 千本樱 曲谱 #include <cstdio ...