jQuery detach()方法

jQuery detach()方法用于删除选择的元素，包括所有文本和子节点，仅保留数据和事件。

此方法将已删除的元素的副本保存起来，以便以后需要时重新插入。

还有其他一些方法可用于删除元素，例如jQuery remove()方法、jQuery empty()方法等，但它们之间有一些细微的差别。

jQuery remove()方法 ：此方法用于删除元素及其数据和事件。

jQuery empty()方法 ：此方法只用于删除所选元素的内容。

语法：

$(selector).detach()

jQuery detach()方法示例1

让我们来举一个例子来演示jQuery detach()方法的效果。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(document).ready(function(){$ ("button").click(function(){
    $("p").detach();
  });
});
</script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button>Click here to detach all p elements</button>
</body>
</html>

jQuery detach()方法示例2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>detach demo</title>
  <style>
  p {
    background: lightpink;
    margin: 6px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button>Click here to Attach/detach all p elements. </button>
<script>
 $( "p" ).click(function() {$ ( this ).toggleClass( "off" );
});
var p;
 $( "button" ).click(function() { if ( p ) { p.appendTo( "body" ); p = null; } else { p =$ ( "p" ).detach();
  }
});
</script>
</body>
</html>

detach()和remove()方法的区别

让我们通过一个例子来清楚detach()和remove()方法的区别：

jQuery detach()方法示例3

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(document).ready(function(){$ ("#btn1").click(function(){
         $("body").append($ ("#p1").detach());
    });
     $("#btn2").click(function(){$ ("body").append( $("#p2").remove()); });$ ("p").click(function(){
        $(this).animate({fontSize: "+=1px"})
    });
});
</script>
</head>
<body>
<p id="p1"><b>This paragraph will keep its click event even after it is moved.</b></p>
<p id="p2">This paragraph will not keep its click event after it is moved.</p>
<button id="btn1">Detach and append p element</button>
<button id="btn2">Remove and append p element</button>
</body>
</html>

通过以上示例，可以清楚地看出jQuery detach()方法不会删除内部数据和事件。在上面的示例中，即使应用了detach()方法，点击事件仍然保留。