html
________________________________________________________________________
<!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添加删除标签
原文地址：http://www.cnblogs.com/AgilityJin/p/7425851.html