jQuery - 删除元素
jQuery - 删除元素
在众多jQuery操作中，删除元素也是非常常见的。jQuery提供了一系列的方法方便我们删除元素。接下来将详细介绍这些方法。
1. remove()
remove()方法被用来在文档中删除一个或多个元素及其所有的事件和数据。用法如下：
$(selector).remove();
其中，selector是要删除的元素。
语法
$(selector).remove();
参数
无。
返回值
被删除的元素本身。
实例
以下示例会将所有<p>元素删除：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>段落 1</p>
<p>段落 2</p>
<p>段落 3</p>
<button>点我删除所有段落元素</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove();
});
});
</script>
</body>
</html>
2. empty()
empty() 方法用来删除匹配的元素集合中的所有子元素。即，它仅删除元素的内容，而不删除元素本身。用法如下：
$(selector).empty();
语法
$(selector).empty();
参数
无。
返回值
被删除的元素本身。
实例
以下示例会将<div>元素里的所有子元素删除：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>段落 1</p>
<div>
<p>段落 2</p>
<p>段落 3</p>
</div>
<button>点我删除div元素里的所有段落元素</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").empty();
});
});
</script>
</body>
</html>
3. detach()
detach()方法与remove()方法类似，但却保留了元素的数据和事件。即，被删除的元素可以再次被添加到文档中的其他位置，而不会丢失其数据和事件。用法如下：
$(selector).detach();
语法
$(selector).detach();
参数
无。
返回值
被删除的元素本身。
实例
以下示例会将元素从<div>移动到<p>中：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<p>段落 1</p>
</div>
<button>点我把div里的p元素移动到body中的p元素中</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div p").detach().appendTo('body p');
});
});
</script>
</body>
</html>
4. unwrap()
unwrap()方法用来删除选定元素的父元素。用法如下：
$(selector).unwrap();
语法
$(selector).unwrap();
参数
无。
返回值
被删除的父元素。
实例
以下示例会将<div>元素里的所有子元素拆分出来：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div>
<p>段落 1</p>
<p>段落 2</p>
</div>
<button>点我将div元素拆分，但保留子元素</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").unwrap();
});
});
</script>
</body>
</html>
总结：以上就是从不同角度删除元素的方法，包括删除自身及其所有事件和数据，删除元素的子元素，从文档中移动元素且保留其数据和事件，以及删除父元素但保留其子元素。希望这些方法能让删除元素这项操作变得非常简单。