jQuery detach() 方法

jQuery 中的detach()方法用於從 DOM 中移除匹配的元素（包括所有文字和子節點），同時保持其資料和事件不變。

此方法保留已移除元素的副本，以便以後可以重新插入它們。

語法

以下是 jQuery 中 detach() 方法的語法：

$(selector).detach()

引數

此方法不接受任何引數。

示例 1

在下面的示例中，我們使用 detach() 方法來移除 <div> 元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").detach();
  })
});
</script>
</head>
<body>
<div>
  <p>This is the element to be detached...</p>
</div>
<button>Click</button>
</body>
</html>

單擊按鈕時，它會移除選定的 <div> 元素，包括其子節點。

示例 2

這裡，我們使用 detach() 方法來移除和恢復 <div> 元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  var detachedElement;
  $("#detach-button").click(function(){
    detachedElement = $("div").detach();
  });

  $("#restore-button").click(function(){
    $("body").append(detachedElement);
  });
});
</script>
</head>
<body>
<div>
  <p>This is the element to be detached.</p>
</div>
<button id="detach-button">Remove Element</button>
<button id="restore-button">Restore Element</button>
</body>
</html>

執行程式後，我們將有兩個按鈕：一個用於移除分離的元素，另一個用於恢復它。單擊“移除元素”按鈕時，div 元素將被分離並從 DOM 中移除。單擊“恢復元素”按鈕將把分離的元素重新插入到 body 中。

jquery_ref_html.htm

列印頁面