jQuery在多個div中，刪除指定項

時間 2019-12-09

標籤 jquery 多個 div 刪除定項欄目 JQuery 简体版

原文原文鏈接

以前工做中有一個需求，就是在一堆圖片列表中，點擊具體的圖片，並從界面移除；點擊具體的圖片，下載；這是一個思路css

<style type="text/css" media="screen">
        .box {
            width: 50px;
            height: 60px;
            margin: 5px 0;
        }
        .box:nth-child(1) {
            background: red;
        }
        .box:nth-child(2) {
            background: blue;
        }
        .box:nth-child(3) {
            background: red;
        }
        .box:nth-child(4) {
            background: pink;
        }
</style>
<body>
    <div class="father">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <button type="button" class="btn">刪除</button>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $(function() {
            var deleteIndex=0;
            $(".box").click(function() {
                console.log($(this).index());
                deleteIndex = $(this).index();
                $(this).siblings().css({"border":"none"});
                // $(this).css({"border-width":"1px","border-style":"solid","border-color":"yellow"});
                $(this).css({"border":"10px solid yellow"});
            });
            $(".btn").click(function() {
                // $("father").find[]
                $(".father").find(".box")[deleteIndex].remove();
            });
        });
    </script>
</body>

相關標籤/搜索