jQuery 删除元素

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

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

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

jQuery删除元素/内容

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

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

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

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参考