jQuery Remove 元素和属性
在本教程中，您将学习如何使用 jQuery 从文档中删除 HTML 元素或其内容及其属性。
jQuery 删除元素或内容
jQuery 提供了一些方法，例如 empty(), remove(), unwrap() 等来从文档中删除现有的 HTML 元素或内容。
jQuery empty() 方法
jQuery empty() 方法从 DOM 中删除所有子元素以及其他后代元素和选定元素中的文本内容。
以下示例将在单击按钮时删除具有类 .container 的元素内的所有内容。
<script>
$(document).ready(function(){
// Empty 空容器元素
$("button").click(function(){
$(".container").empty();
});
});
</script>注意： 根据 W3C（万维网联盟）DOM 规范，元素中的任何文本字符串都被视为该元素的子节点。
jQuery remove() 方法
jQuery remove() 方法从 DOM 中删除选定的元素以及其中的所有内容。 除了元素本身，所有与元素关联的绑定事件和 jQuery 数据都将被删除。
以下示例将在单击按钮时从 DOM 中删除所有具有类 .hint 的 <p> 元素。 这些段落中的嵌套元素也将被删除。
<script>
$(document).ready(function(){
// 从 DOM 中删除带有"hint"类的段落
$("button").click(function(){
$("p.hint").remove();
});
});
</script>jQuery remove() 方法还可以包含一个选择器作为可选参数，它允许您过滤要删除的元素。 例如，上一个示例的 jQuery DOM 删除代码可以重写如下：
<script>
$(document).ready(function(){
// 从 DOM 中删除带有"hint"类的段落
$("button").click(function(){
$("p").remove(".hint");
});
});
</script>注意： 您还可以在 jQuery remove() 方法中包含选择器表达式作为参数，就像 remove(".hint, .demo") 过滤多个元素一样。
jQuery unwrap() 方法
jQuery unwrap() 方法从 DOM 中移除所选元素的父元素。 这通常与 wrap() 方法相反。
以下示例将在单击按钮时删除 <p> 元素的父元素。
<script>
$(document).ready(function(){
// 移除段落的父元素
$("button").click(function(){
$("p").unwrap();
});
});
</script>jQuery removeAttr() 方法
jQuery removeAttr() 方法从选定元素中删除 属性。
下面的示例将在单击按钮时从 <a> 元素中删除 href 属性。
<script>
$(document).ready(function(){
// 删除超链接href属性
$("button").click(function(){
$("a").removeAttr("href");
});
});
</script>Advertisements