移除元素
| 方法 | 说明 |
| remove() | 从DOM中移除匹配的元素及其所有的后代和文本节点。 |
| detach() | 从DOM中移除匹配的元素及其所有的后代和文本节点。还会在内存中保留副本。通常使用remove()方法。 |
| empty() | 从DOM中移除匹配元素子节点及后代。 |
| unwrap() | 移除匹配子节点及其后代。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>remove</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>移除元素</button>
<script>
$('button').on('click', function () {
$('div').remove();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>remove</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>删除元素</button>
<script>
$('button').on('click', function () {
$('li').remove('#a');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>detach</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>移除元素</button>
<script>
$('button').on('click', function () {
$('div').detach();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>empty</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>删除元素</button>
<script>
$('button').on('click', function () {
$('li').empty();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>unwrap</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>移除元素</button>
<script>
$('button').on('click', function () {
$('ul').unwrap();
});
</script>
</body>
</html>