JQuery添加刪除標簽
阿新 • • 發佈：2017-08-25
src rip col -h 事件委托 block -a move 未渲染
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添加刪除標簽