jQuery 删除元素
使用 jQuery，可以轻松删除现有的 HTML 元素。
删除元素/文本
要删除元素和内容，主要有两种 jQuery 方法:
remove()- 删除选定元素（及其子元素）empty()- 从选定元素中删除子元素
jQuery remove() 方法
jQuery remove() 方法移除所选元素及其子元素。
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/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><script src="https://libs.baidu.com/jquery/2.1.4/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="test" 的 <p> 元素:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").remove(".test");});});</script><style>.test {color: red;font-size: 20px;}</style></head><body><p>这是一段文本</p><p class="test">这是另一段文本</p><p class="test">这是另一段文本</p><button>使用 class="test" 删除所有 p 元素</button></body></html>
这个实例删除所有的 class="test" 或 class="demo" 的 <p> 元素:
实例
<!DOCTYPE html><html><head><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").remove(".test, .demo");});});</script><style>.test {color: red;font-size: 20px;}.demo {color: green;font-size: 25px;}</style></head><body><p>这是一个段落</p><p class="test">这是一个 class="test" 的 p 元素</p><p class="test">这是一个 class="test" 的 p 元素</p><p class="demo">这是一个 class="demo" 的 p 元素</p><button>删除所有的 class="test" 和 class="demo" 的 p 元素</button></body></html>
jQuery HTML 参考
有关所有 jQuery HTML 方法的完整概述，请访问本站的 jQuery HTML/CSS 参考。