## jQuery -刪除元素
* * *
通過 jQuery,可以很容易地刪除已有的 HTML 元素。
* * *
## 刪除元素/內容
如需刪除元素和內容,一般可使用以下兩個 jQuery 方法:
* [remove()](https://www.w3cschool.cn/jquery/html-remove.html)\- 刪除被選元素(及其子元素)
* [empty()](https://www.w3cschool.cn/jquery/html-empty.html)\- 從被選元素中刪除子元素
* * *
## jQuery remove() 方法
jQuery remove() 方法刪除被選元素及其子元素。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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;">
這是 div 中的一些文本。
<p>這是在 div 中的一個段落。</p>
<p>這是在 div 中的另外一個段落。</p>
</div>
<br>
<button>移除div元素</button>
</body>
</html>
```
## jQuery empty() 方法
jQuery empty() 方法刪除被選元素的子元素。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
這是 div 中的一些文本。
<p>這是在 div 中的一個段落。</p>
<p>這是在 div 中的另外一個段落。</p>
</div>
<br>
<button>清空div元素</button>
</body>
</html>
```
## 過濾被刪除的元素
jQuery remove() 方法也可接受一個參數,允許您對被刪元素進行過濾。
該參數可以是任何 jQuery 選擇器的語法。
下面的例子刪除 class="italic" 的所有 元素:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>這是一個段落。</p>
<p class="italic"><i>這是另外一個段落。</i></p>
<p class="italic"><i>這是另外一個段落。</i></p>
<button>移除所有 class="italic" 的 p 元素。</button>
</body>
</html>
```
- 簡介
- 安裝
- 語法
- 選擇器
- 事件
- click
- dblclick
- mouseenter
- mouseleave
- mousedown
- mouseup
- hover
- focus
- blur
- 鍵盤事件
- 效果
- 隱藏和顯示
- 淡入淡出
- 滑動
- 動畫
- 停止滑動
- jQuery Callback 方法
- jQuery Chaining
- jQuery_HTML
- jQuery獲取
- jQuery設置
- jQuery添加元素
- jQuery刪除元素
- jQuery CSS類
- jQuery css() 方法
- jQuery 遍歷
- jQuery AJAX
- jQuery AJAX簡介
- jQuery - AJAX load() 方法
- jQuery - AJAX get() 和 post() 方法