jQuery在多个div中,删除指定项
2024-08-31 10:52:35
之前工作中有一个需求,就是在一堆图片列表中,点击具体的图片,并从界面移除;点击具体的图片,下载;这是一个思路
<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>
最新文章
- mysql不能插入中文
- fullpage 插件学习心得
- 使用my exclipse对数据库进行操作(3)
- web项目 验证码 *** 最爱那水货
- 简单研究Android View绘制一 测量过程
- 读书笔记:Sheldon Ross:概率论基础教程:随机变量
- redis专题--slow log详解
- 【转】2-SAT题集
- 在Ubuntu下卸载Apache
- 正则表达式从右往左进行匹配(Regex)
- xhEditor入门基础
- 零基础HTML编码学习笔记
- Think In Java_读书笔记_042516
- C#操作Excel(读取)
- delete操作字符串会报错吗?
- jquery之商城菜单
- Linux系统更改默认Python版本
- python gpio
- php----函数大全
- poj 2187 Beauty Contest , 旋转卡壳求凸包的直径的平方
热门文章
- Findbugs分析工具介绍
- ubuntu16.04下编译安装OpenCV
- RabbitMQ学习笔记(4)----RabbitMQ Exchange(交换机)的使用
- Bootstrap 有一个 class 属性叫做 well,它的作用是为设定的列创造出一种视觉上的深度感
- 企业级任务调度框架Quartz(5) Quartz的声明式配置
- Javase 简单代码练习
- 移动端开发-Day1
- 序列模型(2)-----循环神经网络RNN
- class一些内置方法
- 【ACM-ICPC 2018 沈阳赛区网络预赛 I】Lattice&#39;s basics in digital electronics