1. 教程
  2. jQuery 教程
  3. jQuery 删除元素和属性

jQuery 删除元素和属性

Created: October-14, 2018

在本教程中，你将学习如何使用 jQuery 从文档中删除 HTML 元素或其内容及其属性。

jQuery 删除元素或内容

jQuery 提供很多方法，如 empty() 、 remove() 和 unwrap() 等等，以除去从文档现有的 HTML 元素或内容。

jQuery empty() 方法

jQuery empty() 方法从 DOM 中删除所有子元素以及其他后代元素和所选元素中的文本内容。

以下示例将在单击按钮时删除 .container 元素内的所有内容。

<script type="text/javascript">
$(document).ready(function(){
    // Empty container element
    $("button").click(function(){
       $(".container").empty();
    });
});
</script>

注意： 根据 W3C（万维网联盟）DOM 规范，元素中的任何文本字符串都被视为该元素的子节点。

jQuery remove() 方法

jQuery remove() 方法从 DOM 中删除所选元素以及其中的所有内容。除了元素本身之外，还删除了与元素关联的所有绑定事件和 jQuery 数据。

以下示例将在按钮单击时从 DOM 中删除具有 .hint 类的所有 <p> 元素。这些段落中的嵌套元素也将被删除。

<script type="text/javascript">
$(document).ready(function(){
    // Removes paragraphs with class "hint" from DOM
    $("button").click(function(){
       $("p.hint").remove();
    });
});
</script>

jQuery remove() 方法还可以包含一个选择器作为可选参数，允许你过滤要删除的元素。例如，前面的示例的 jQuery DOM 删除代码可以重写如下：

<script type="text/javascript">
$(document).ready(function(){
    // Removes paragraphs with class "hint" from DOM
    $("button").click(function(){
       $("p").remove(".hint");
    });
});
</script>

注意： 你还可以将选择器表达式作为参数包含在 jQuery remove() 方法中， remove(".hint, .demo") 以便过滤多个元素。

jQuery unwrap() 方法

jQuery unwrap() 方法从 DOM 中删除所选元素的父元素。这通常是 wrap() 方法的反转。

以下示例将在按钮单击时删除 <p> 元素的父元素。

<script type="text/javascript">
$(document).ready(function(){
    // Removes the paragraph's parent element
    $("button").click(function(){
       $("p").unwrap();
    });
});
</script>

jQuery removeAttr() 方法

jQuery removeAttr() 方法从所选元素中删除属性。

下面的示例将单击按钮时删除 <a> 元素的 href 属性。

<script type="text/javascript">
$(document).ready(function(){
    // Removes the hyperlink's href attribute
    $("button").click(function(){
       $("a").removeAttr("href");
    });
});
</script>