为什么第一次remove了p元素,第二次remove的时候还要将前面的p算上,:contains('3')而不是:contains('1'),这样说,内部是不是依然没有删除的,只是不显示
首先,你对contains筛选的理解可能不太对,contains('3')的意思不是筛选出索引的第三个元素,而是筛选出文本内容包含'3'的元素。所以,执行了remove方法之后是删除了test1中的p元素的。
首先你要明白:contains()选择器的用法
也就是说
$("p").remove(":contains('3')")
这一句代码的含义不是指删除第三个p元素,而是指删除text中含有3的p元素。因此当你删除p元素3后,再次点击自然不会继续remove p元素。
为了加深你的理解:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
.btn
{
cursor:pointer;
}
</style>
</head>
<body>
<div class="test1">
<p>p元素1</p>
<p>p元素2</p>
</div>
<div class="test2">
<p>p元素3</p>
<p>p元素4</p>
</div>
<div id="btn_remove" class="btn">删除第二个p元素</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$("#btn_remove").on("click",function()
{
var length = $("p").length;
index = 0;
$("p").each(function()
{
if(index == 1)
{
$(this).remove();
}
index++;
})
})
</script>
</body>
</html>
当你点击删除第二个p元素后,
p元素2会被删除
当你点击删除第二个p元素后
p元素3会被删除(因为此刻p元素3位于p元素集合中第二个位置)
不知道这样讲,你明白了吗?还有问题可以联系我。