jQuery- 删除或清空某个HTML元素

最新推荐文章于 2021-12-10 21:17:40 发布

原创最新推荐文章于 2021-12-10 21:17:40 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #ViewUI

html + js + css 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了jQuery中用于删除或清空HTML元素的remove()和empty()方法，通过实例演示了如何使用这些方法，并展示了remove()方法的一个高级用法，即通过jQuery选择器过滤需要删除的元素。

jQuery使用下面两个方法来删除或是清空某个HTML元素。

remove() – 删除指定的元素（包括其子元素）
empty() – 清空指定元素的子元素

<!DOCTYPE html>  
<html>  
<head>  

<meta charset="utf-8">  
<title>JQuery Demo</title>  

<script src="scripts/jquery-1.9.1.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>Remove div element</button>  

  
</body>  
</html> 
empty： 
<!DOCTYPE html>  
<html>  
<head>  

<meta charset="utf-8">  
<title>JQuery Demo</title>  

<script src="scripts/jquery-1.9.1.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;">  

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>Empty the div element</button>  

  
</body>  
</html>