JQuery添加刪除標籤

時間 2019-12-10

原文原文鏈接

<!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();    })});

相關標籤/搜索