jQuery 删除元素

jQuery的一个非常重要的部分是操纵DOM。

jQuery提供了许多方法，可以从文档中删除现有的HTML元素或内容。

在本章中，我们将说明如何从DOM中删除HTML元素/内容。

jQuery删除元素/内容

使用jQuery，我们可以轻松删除HTML元素。

我们有以下用于删除元素和内容的jQuery方法：

• remove()

• empty()

• unwrap()

下面将向您展示如何使用每种方法。

jQuery remove()方法

jQuery remove()方法从DOM中删除选定的元素及其子元素。

下面的示例从DOM中删除所有段落：

$("button").click(function(){
  $("p").remove();
});

jQuery remove()方法还接受一个参数，该参数使您可以过滤要删除的元素。

该参数可以是任何jQuery选择器。

下面的示例从DOM中删除所有包含“ Hello”的段落：

$("button").click(function(){
  $("p").remove(":contains('Hello')");
});

jQuery empty()方法

jQuery empty()方法从所选元素中删除所有子节点（包括文本节点）。

下面的示例从所有段落中删除所有子节点（包括文本节点）：

$("button").click(function(){
  $("p").empty();
});

注意：此方法不会删除元素本身或其属性。

jQuery unwrap()方法

jQuery unwrap()方法删除所选元素的父元素。

下面的示例删除所有段落的父元素：

$("button").click(function(){
  $("p").unwrap();
});

jQuery删除属性-removeAttr()

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

下面的示例从所有超链接中删除href属性：

$("button").click(function(){
  $("a").removeAttr("href");
});

要删除多个属性，请用空格分隔属性名称。

下面的示例从所有段落中删除多个属性：

$("button").click(function(){
  $("p").removeAttr("id class title");
});

jQuery HTML参考

有关完整的HTML方法参考，请访问我们的jQuery HTML / CSS参考。