The detach() method removes the selected elements, including all text and child nodes. However, it keeps data and events.This method also keeps a copy of the removed elements, which allows them to be reinserted at a later time.The .detach() method is the same as .remove() , except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
Note-1: To remove the elements and its data and events, use the .remove() method instead.
Note-2: To remove only the content from the selected elements, use the empty() method.
Syntax:
$(selector).detach() |
Example :
|
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").detach();
});
});
</script>
</head>
<body>
<p>This is a paragraph ....</p>
<p>This is second
paragraph.......</p>
<button>Remove all <p> elements from the page</button>
</body>
</html>
|
