關于remove的移除問題
<!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后為什么連第一個按鈕里的也刪除了。這個不是已經制定了位置了么
2016-08-15
因為$("p").remove(":contains('p')")中的選擇器選中的是所有的p元素,remove中的參數選定的是即將被刪除的元素,兩個div中包含了p元素同時文本內容也包含了p,所以全部都被刪除了~
2016-08-15
$("button:last")在這里表示的是第二個button, $("p").remove(":contains('p')")的意思是,當點擊第二個按鈕的時候,找到所有p元素中,文本里包含了‘3’的這個字符的p元素,也就是 <p>p元素3</p>,可以回去看下內容選擇器的部分關于:contains的用法。
2016-08-15
$("button:last")只是針對button的click事件,
可以把click function改成$(".test2 p").remove(":contains('p')")? 對test2里的所有p元素查找