幾個前端使用的移除元素的方法,可能這些方法還有別的作用,但是這裏只說他們清空的作用:
- remove() - 刪除被選元素(及其子元素和註釋---被選元素及其內部所有的內容)
- empty() - 從被選元素中刪除子元素(被選元素內部所有的內容)
- html("")- 從被選元素中刪除子元素(被選元素內部所有的內容)
- empty和html是一樣作用的。
下面使用代碼進行測試:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
<!-- 這是註釋 -->
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>刪除 div 元素</button>
</body>
</html>
這是我們測試使用的工具,w3c網址編輯頁面同時查看頁面效果,瀏覽器f12查看代碼效果。
執行remove之後的效果:
執行empty()
執行html("")
jQuery remove()方法也可接受一個參數,允許您對被刪元素進行過濾。該參數可以是任何 jQuery 選擇器的語法。
下面的例子刪除 所有 <p> 元素:
比如:
$("p").remove(".italic");
我們經常一塊使用的方法:
find(),parent().parents()
parents裏面要是用jQuery選擇器來定位。