<!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. win10+vs2017+asp.net MVC5+EF6+mysql 闪退问题，解决方法

    1.安装 mysql-for-visualstudio-2.0.5.msi 2.安装 mysql-connector-net-6.10.7.msi 3.在VS2017 右键选中项目,管理NuGet程序 ...

  2. java 方法重写原则

    方法重写应遵循“三同一小一大”原则: “三同”:即方法名相同,形参列表相同,返回值类型相同: “一小”:子类方法声明抛出的异常比父类方法声明抛出的异常更小或者相等: “一大”:子类方法的访问修饰符应比 ...

  3. python学习（十四）面向对象

    Python中的面向对象,先写类,会生成类对象,类对象然后创建对象,对象就可以拿来用了. Python支持多重继承. class语句创建类对象,并将其赋值给变量名. class语句内的赋值语句会创建类 ...

  4. golang 格式化时间成datetime

    Golang或者Beego,总需要往数据库里写datetime时间戳. Golang对时间格式支持并不理想. 先看一个例子: package main import ( "fmt" ...

  5. Docker入门系列7 动态映射端口port mapping

    为何想要动态映射端口呢? 因为刚开始run启动容器时,并不知道里面需要映射哪些端口,等容器已创建了,想映射端口. 当然可以通过先commit成镜像,然后再次run时指定端口,但会生成中间的镜像,对于有 ...

  6. PowerBuilder -- 指定重复的列不显示

  7. eclipse tomcat maven

    jdk jre eclipse 略过 下载maven和tomcat 上apache官网下载maven:http://maven.apache.org/download.cgi. 上apache官网下载 ...

  8. Android-DrawerLayout介绍

    DrawerLayout已经出来非常久了,个人认为国内的app都深受ios的毒害在设计上都争先模仿ios的风格,都忘了什么是独特的Android风格.自己得先学的然后跟产品争取在项目中使用上一系列的A ...

  9. &lt;LeetCode OJ&gt; 121. /122. Best Time to Buy and Sell Stock（I / II）

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  10. CGI的基本原理

    一．基本原理 CGI:通用网关接口(Common Gateway Interface)是一个Webserver主机提供信息服务的标准接口.通过CGI接口,Webserver就行获取client提交的信 ...