<!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. HTML/CSS开发规范指南

    参见文档:https://github.com/doyoe/html-css-guide 1.文档目录结构 |-- 项目名 |-- src 开发环境 |-- html 静态页面模板目录 |-- bgi ...

  2. NightWatchJS(转）

    关于Nightwatch? Nightwatch.js是一个测试web app和web 站点的自动化测试框架, 使用Node.js编写, 基于Selenium WebDriver API. 它是一个完 ...

  3. Allegro skill

    https://blog.csdn.net/wyu0725/article/details/52367199 Allegro skill二次开发和更改菜单页面 简单的使用skill;能够使Aleggr ...

  4. Spring学习十----------Bean的配置之Autowired注解实现

    © 版权声明:本文为博主原创文章,转载请注明出处 @Required -@Required注解适用于bean属性的setter方法 -这个注解仅仅表示,受影响的bean属性必须在配置时被填充,通过在b ...

  5. 数据结构（Java语言）——Stack简单实现

    栈是限制插入和删除仅仅能在一个位置上进行的表.该位置是表的末端,叫做栈的顶top.对栈的基本操作有进栈push和出栈pop,前者相当于插入.后者这是删除最后插入的元素. 栈有时又叫先进先出FIFO表. ...

  6. 有关SQL注入的知识

    SQL注入攻击是非常令人讨厌的安全漏洞,是所有的web开发人员,不管是什么平台,技术,还是数据层,需要确信他们理解和防止的东西.不幸的是,开发人员往往不集中花点时间在这上面,以至他们的应用,更糟糕的是 ...

  7. c# .net Global.asax文件的作用

    1 Global.asax文件的作用 先看看MSDN的解释,Global.asax 文件(也称为 ASP.NET 应用程序文件)是一个可选的文件,该文件包含响应 ASP.NET 或HTTP模块所引发的 ...

  8. 使用Erlang和Thrift，与Hbase通信（转）

    操作系统是Ubuntu Server 12.10 先安装Thrift sudo apt-get install libboost-dev libboost-test-dev \ libboost-pr ...

  9. UVALive 6530 Football （水

    题目链接:点击打开链 #include <cstdio> #include <vector> #include <algorithm> using namespac ...

  10. iOS 键盘变中文

    plist文件添加 Localizations 添加一项字段Chinese (simplified)