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>

posted @ 2018-04-19 18:42  星辰之夜  阅读(500)  评论(0编辑  收藏  举报