jQuery删除和便利元素_动态便利 $('.lf-floor ').find('li').removeclass('.lf-f-CSDN博客

本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/122999282

删除元素有两种方法：remove(),empty();
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style type="text/css">
		 span{
		    color: white;
		    padding: 8px;
		    margin: 5px;
		    float: left;
		 }
	/* 	 .green{
		    background-color: green;
		 } */
		 .green{
			 background-color: green;
		 }
	/* 	 .blue{
		    background-color: blue;
		 } */
		 .blue{
			 background-color: blue;
		 }
		 </style>
	</head>
	<body>
		<h3>删除元素</h3>
		 <span class="green">jquery<a>删除</a></span>
		        <span class="blue">javase</span>
		        <span class="green">http协议</span>
		        <span class="blue">servlet</span>
	</body>
	<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//删除所有蓝色的元素
		$(".blue").remove();
	
	</script>
</html>

便利元素用each()这个函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		 span{
		    color: white;
		    padding: 8px;
		    margin: 5px;
		    float: left;
		 }
	/* 	 .green{
		    background-color: green;
		 } */
		 .green{
			 background-color: green;
		 }
		/* .blue{
		    background-color: blue;
		 } */
		 .blue{
			 background-color: blue;
		 }
		 </style>
	</head>
	
	<body>
		<h3>遍历元素 each()</h3>
		 <span class="green">jquery</span>
		        <span class="green">javase</span>
		        <span class="green">http协议</span>
		        <span class="green">servlet</span>
	</body>
	<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// $(selector).each(function(index,element)) :遍历元素
		// 参数 function 为遍历时的回调函数，
		// index 为遍历元素的序列号，从 0 开始。
		// element是当前的元素，此时是dom元素。
		// this指代当前元素
		
		$(".green").each(function(index,element){
			console.log(index);
			console.log(element);//此时是一个dom对象
			console.log($(element));//或者console.log($(this))把当前元素转成jQuery对象
		});
	</script>
</html>