標籤：width var pre doc oct min cti jquery on()
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添加刪除標籤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
