jQuery在多个div中，删除指定项

最新推荐文章于 2021-03-21 23:26:22 发布

weixin_33819479

最新推荐文章于 2021-03-21 23:26:22 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaqilin/p/8885176.html

本文介绍了一个简单的图片列表操作示例，包括如何通过点击事件选中特定图片并对其施加样式，以及如何移除已选中的图片。示例使用了jQuery简化DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前工作中有一个需求，就是在一堆图片列表中，点击具体的图片，并从界面移除；点击具体的图片，下载；这是一个思路

<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>