<!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. Windows下ADB使用相关问题

    Windows下ADB使用相关问题 适用环境: 在Windows XP.WIN7下均可按本文操作进行.WIN8下没有进行实验.但操作设置大致同样.除了第4步.adb_usb.ini的位置可能有所不同以 ...

  2. deeplearning.net 0.1 document - Multilayer Perceptron

    Multilayer Perceptron 以下我们使用Theano来介绍一下单隐藏层的多层感知机(MLP).MLP能够看成一个logistic回归分类器,它使用一个已经学习的非线性转换器处理输入.这 ...

  3. 根据URL发起HTTP请求，我的HTTPHelper。

     完整的demo using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  4. window+Jira+SQL Server

    window下Jira+SQL Server部署+汉化+破解(亲测2018.5) 网上很多都是jira+mysql部署的文章,由于我现在有需求要用SQL Server数据库,因此就动手试了一下,参考网 ...

  5. PowerBuilder -- Tab控件

    在tab中关闭窗口 Close(tab_1.getparent()) 调整tab中的控件的tab oder 鼠标右键tabpage_1,选择 Tab Order菜单.

  6. Oracle exp使用正則表達式导出部分表

    假设数据库中有许多张表,而我们又仅仅想导出须要的那几张能够使用例如以下命令 --仅仅导出test1.test2表 exp myname/mypassword@orcl file = d:\my.dmp ...

  7. iOS 使用 Core Plot 绘制统计图表入门

     本文转载至 http://blog.csdn.net/zhibudefeng/article/details/7677457   iOS(iPhone/iPad) 下图形组件有两个有名的,s7gra ...

  8. PHP数据类型转换和运算符表达式

    一:数据类型的转换 获取类型: gettype($a); 判断是否是某种类型的数据: is_类型名($a); 1.(int)$a; 2.settype($a,int); 二:运算符表达式 1.数学运算 ...

  9. k-anonymity

    k匿名(k-anonymity)是一种常用的社交网络隐私保护技术,其思想是通过人为构造一定数量与目标节点拓扑结构相同的节点来降低用户被定位的概率 [匿名]英语怎么说_在线翻译_有道词典 http:// ...

  10. serve-index用法、实现原理（源码解读）

    本文主要讲解serve-index的用法和实现原理(源代码分析). 一 说明 serve-index的功能是将文件夹中文件列表显示到浏览器中. serve-index是一个NodeJS模块,可以通过N ...