<!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添加删除标签的更多相关文章

  1. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

  2. 分别使用原生js和jQuery添加/删除元素的class属性

    一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...

  3. jQuery添加删除节点例子第十节"员工增删表"

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery 添加 删除 改动select option

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

  5. jQuery添加/删除元素

    jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容(仍然该元素的内部). 追加前:<p>这是一个文本段落</p> $(" ...

  6. jQuery添加删除

    //代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...

  7. jQuery添加/删除Select的Option项

    使用语法1. $("#select_id").append("<option value='Value'>Text</option>") ...

  8. jquery 添加html标签

    <script type="text/javascript"> var sss = 1; function addFile() { if (sss < 20) { ...

  9. jQuery 增加 删除 修改select option .

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

随机推荐

  1. gitlab服务器邮箱配置

    如想用 SMTP 代替 Sendmail 发送email,添加如下相应邮箱服务商的配置到/etc/gitlab/gitlab.rb, 然后运行gitlab-ctl reconfigure使修改生效. ...

  2. C# 实现和调用自定义扩展方法

    定义和调用扩展方法 定义一个静态类以包含扩展方法.该类必须对客户端代码可见. 将该扩展方法实现为静态方法,并使其至少具有与包含类相同的可见性. 该方法的第一个参数指定方法所操作的类型:该参数必须以 t ...

  3. UbuntuServer12.04安装MongoDB,开机自启,服务,权限

    获取最新版本 去http://www.mongodb.org/downloads找最新版的链接 wget http://fastdl.mongodb.org/linux/mongodb-linux-x ...

  4. U-Boot中关于TEXT_BASE，代码重定位，链接地址相关说明

    都知道U-BOOT分为两个阶段,第一阶段是(~/cpu/arm920t/start.S中)在FLASH上运行(一般情况 下),完成对硬件的初始化,包括看门狗,中断缓存等,并且负责把代码搬移到SDRAM ...

  5. VxWorks启动过程具体解释（下）

    上一节主要是从映像的分类和各种映像的大致载入流程上看VxWorks的启动过程,这一节让我们从函数级看一下VxWorks的启动过程: 1. Boot Image + Loadable Images: 以 ...

  6. Emgu安装配置及使用

    前言:项目需要,需使用图像处理来完成机械臂从运动的皮带上抓取物体的功能,所以又重拾视觉与图像处理内容. 内容:Emgu是OpenCV的一个跨平台的.NET封装,结构如下图所示: 下载地址:http:/ ...

  7. Fragment 生命周期：

    Fragment每个生命周期方法的意义.作用(注意红色的不是生命周期方法):setUserVisibleHint():设置Fragment可见或者不可见时会调用此方法.在该方法里面可以通过调用getU ...

  8. 1355: [Baltic2009]Radio Transmission[循环节]

    1355: [Baltic2009]Radio Transmission Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 796  Solved: 538 ...

  9. android菜鸟学习笔记6----android布局(一)

    Android应用的UI组件都是继承自View类,View类表示的就是一个空白的矩形区域.常用的组件如TextView.Button.EditText等都直接或间接继承自View. 此外,View还有 ...

  10. android菜鸟学习笔记3----关于AndroidMainfest.xml

    每个android项目都包含一个AndroidMainfest.xml文件,它包含了组成应用程序的每一个Acitivity.Service.Content Provider和Broadcast Rec ...