jQuery 刪除元素

jQuery的一個非常重要的部分是操縱DOM。

jQuery提供了許多方法，可以從文檔中刪除現(xiàn)有的HTML元素或內(nèi)容。

在本章中，我們將說明如何從DOM中刪除HTML元素/內(nèi)容。

jQuery刪除元素/內(nèi)容

使用jQuery，我們可以輕松刪除HTML元素。

我們有以下用于刪除元素和內(nèi)容的jQuery方法：

• remove()

• empty()

• unwrap()

下面將向您展示如何使用每種方法。

jQuery remove()方法

jQuery remove()方法從DOM中刪除選定的元素及其子元素。

下面的示例從DOM中刪除所有段落：

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

jQuery remove()方法還接受一個參數(shù)，該參數(shù)使您可以過濾要刪除的元素。

該參數(shù)可以是任何jQuery選擇器。

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

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

jQuery empty()方法

jQuery empty()方法從所選元素中刪除所有子節(jié)點（包括文本節(jié)點）。

下面的示例從所有段落中刪除所有子節(jié)點（包括文本節(jié)點）：

$("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參考

有關(guān)完整的HTML方法參考，請訪問我們的jQuery HTML / CSS參考。