JQuery添加删除标签 

<!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();
    })
});
posted @ 2018-10-29 16:27  惑心  阅读(4904)  评论(1)  编辑  收藏  举报