<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.test1 {
background: #bbffaa;
}
.test2 {
background: yellow;
}
</style>
</head>
<body>
<h2>通过jQuery remove方法移除元素</h2>
<div class="test1">
<p>p元素1</p>
<p>p元素2</p>
</div>
<div class="test2">
<p>p元素3</p>
<p>p元素4</p>
</div>
<button>点击通过jQuery的empty移除元素</button>
<button>点击通过jQuery的empty移除指定元素</button>
<script type="text/javascript">
$("button:first").on('click', function() {
//删除整个 class=test1的div节点
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中,包含了3的元素
//这个也是一个过滤器的处理
$("p").remove(":contains('p')")
})
</script>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~
当我把包含的内容从3改成p后为什么连第一个按钮里的也删除了。这个不是已经制定了位置了么
因为$("p").remove(":contains('p')")中的选择器选中的是所有的p元素,remove中的参数选定的是即将被删除的元素,两个div中包含了p元素同时文本内容也包含了p,所以全部都被删除了~
$("button:last")在这里表示的是第二个button, $("p").remove(":contains('p')")的意思是,当点击第二个按钮的时候,找到所有p元素中,文本里包含了‘3’的这个字符的p元素,也就是 <p>p元素3</p>,可以回去看下内容选择器的部分关于:contains的用法。
$("button:last")只是针对button的click事件,
可以把click function改成$(".test2 p").remove(":contains('p')") 对test2里的所有p元素查找