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>
总结:以上就是从不同角度删除元素的方法,包括删除自身及其所有事件和数据,删除元素的子元素,从文档中移动元素且保留其数据和事件,以及删除父元素但保留其子元素。希望这些方法能让删除元素这项操作变得非常简单。