jQuery在多个div中，删除指定项
之前工作中有一个需求，就是在一堆图片列表中，点击具体的图片，并从界面移除；点击具体的图片，下载；这是一个思路
<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>
jQuery在多个div中，删除指定项的更多相关文章
- String的两个API，判断指定字符串是否包含另一字符串，在字符串中删除指定字符串。
// 在字符串中删除指定字符串. String phoneNum="1795112345"; phoneNum = phoneNum.replace("17951&quo ...
- splice从数组中删除指定定数据
/*从数组中删除指定定数据var somearray = ["mon", "tue", "wed", "thur"]so ...
- ES6数组中删除指定元素
知识点: ES6从数组中删除指定元素 findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引.否则返回-1. arr.splice(arr.findIndex(item => ...
- arts打卡 从排序数组中删除重复项
Algorithm 从排序数组中删除重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组 ...
- [LeetCode] 80. Remove Duplicates from Sorted Array II ☆☆☆(从有序数组中删除重复项之二)
https://leetcode.com/problems/remove-duplicates-from-sorted-array-ii/discuss/27976/3-6-easy-lines-C% ...
- 一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部
前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...
- 【Linux】linux中删除指定文件外所有其他文件（夹）的问题
今天碰到要删除指定文件(夹)外的其他文件的问题.网上查到的方法是这样的 需要在当前文件夹中进行: rm -rf !(keep) #删除keep文件之外的所有文件 rm -rf !(keep1|keep ...
- Java中删除指定文件夹文件夹下面有内容也删除使用递归方案
import java.io.File; import java.text.ParseException; import java.text.SimpleDateFormat; import java ...
- Git中删除指定文件
之前的博客Git基础使用教程介绍了Git这个开源分布式管理系统的一些基础操作,这篇博客,介绍下如何利用Git删除远程仓库的文件... 1.拉取远程仓库的文件到本地 git clone xxx 如果还未 ...
- 从jarray中删除指定元素的问题
string jsonText = "[{\"a\": \"aaa\",\"b\": \"bbb\",\&qu ...
随机推荐
- ubuntu 搭建Mercurial 服务(nginx)
ubuntu 搭建Mercurial 服务(nginx) 环境:ubuntu 12.05 Mercurial 步骤: (1)安装nginx 和 Mercurial: sudo apt-get ins ...
- Functor、Applicative 和 Monad（重要）
Functor.Applicative 和 Monad Posted by 雷纯锋Nov 8th, 2015 10:53 am Functor.Applicative 和 Monad 是函数式编程语言 ...
- 关于ZBrush中Subtool的小秘密
想问大家一个问题,你们刚开始学习ZBrush 3D图形绘制软件的时候,是不是特别迷茫?有没有人和小编一样,一直以为ZBrush中的Subtools就相当于Layers呢? 经过长时间的实践之后,小编才 ...
- mvvm模式和mvc模式 概述总结对比
1.mvc模式简介: MVC的全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,是一种软件设计典范.例如: angular ...
- 移动前端头部标签(HTML5 head meta)转载
移动web页面头部书写 字数2516 阅读1128 评论0 喜欢30 HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用 ...
- let var const
eslint要求变量声明使用const的,而不是let和var如果可能的话. 如果一个变量只有在声明时才被赋值一次,那么应该使用'const' 'use strict';(function() { v ...
- Python数据分析4------------数据变换
1.简单变换: 开方.平方.对数等 2.数据规范化: (1)离差标准化(最小最大标准化):消除量纲(单位)影响以及变异大小因素的影响. x1=(x-min)/(max-min) 代码:data1=(d ...
- React传递参数的多种方式
最常见的就是父子组件之间传递参数 父组件往子组件传值,直接用this.props就可以实现 在父组件中,给需要传递数据的子组件添加一个自定义属性,在子组件中通过this.props就可以获取到父组件传 ...
- There are no packages available for installation. Sublime3解决方法
最近在学习Vue,在配置sublime3的时候,想要高亮vue的语法,下载点插件 Package Control的时候,总报 There are no packages available for ...
- Project Euler 29 Distinct powers（ 大整数质因数分解做法 + 普通做法 ）
题意: 考虑所有满足2 ≤ a ≤ 5和2 ≤ b ≤ 5的整数组合生成的幂ab: 22=4, 23=8, 24=16, 25=3232=9, 33=27, 34=81, 35=24342=16, 4 ...