Updated July 7, 2023
Introduction to jQuery detach()
The ‘detach()’ is a pre-defined method in jQuery that removes a particular element and sub-elements while leaving out the data and corresponding events. The syntax for this method is ‘$(selector).detach()’, where the detach() method does not allow any parameters to be passed through it. jQuery has two other alternate methods for this purpose, such as the remove() method and the empty(), and these methods have their unique properties with slight alterations from the detach() method.
Syntax:
$(selector). detch( )This method removes a selected element. This method does not accept any parameters.
Examples of jQuery detach()
Below are the examples:
Example #1
Example of jQuery detach() method without any parameters. Next, we write the HTML code to understand this method more clearly with the following example where we detach or remove the < h1> elements by calling this method on < h1 > HTML element, as shown in the below code.
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery detach( ) method </title>
<!-- code to show the jQuery detach( ) working method -->
<script>
$( document ).ready(function(){
$( "button" ).click(function(){
$( "h1" ).detach();
});
});
</script>
</head>
<body>
<h1> This is first h1 heading </h1>
<h1> This is second h1 heading </h1>
<button> Click here to remove all h1 elements </button>
</body>
</html>Output:
Once we click the button, the output is:
Example #2
Example of jQuery detach() method for detach and reattach HTML element. Next example code where this method is used to detach and reattach the < h1 > HTML element, as in the below code.
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery detach( ) method </title>
<!-- code to show the jQuery detach( ) working method -->
<style>
h1 {
background : yellow;
margin : 10px 0;
}
</style>
</head>
<body>
<h1> This is first h1 heading </h1>
<h1> This is second h1 heading </h1>
<button> Click here to remove all h1 elements </button>
<script>
$( "h1" ).click(function() {
$( this ).toggleClass( "off" );
});
var v;
$( "button" ).click( function() {
if ( v ) {
v.appendTo( "body" );
v = null;
} else {
v = $( "h1" ).detach();
}
});
</script>
</body>
</html>Output:
Once we click the button, the output is:
Once we click the same button again, the output is:
Example #3
Example to show the difference between jQuery remove() method and jQuery detach() method. Next example code where this method is used to detach and reattach the < h1 > HTML element, as in the below code.
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery detach( ) method </title>
<!-- code to show the jQuery detach( ) working method -->
<script>
$( document ).ready(function(){
$( "#b1" ).click(function(){
$( "body" ).append($( " #h1" ).detach());
});
$( "#b2" ).click(function(){
$( "body" ).append($( "#h2" ).remove());
});
$( "h1" ).click(function(){
$( this ).animate( {fontSize: "+=1px"} )
});
});
</script>
</head>
<body>
<h1 id="h1"> <b>This heading will keep its click event even after it is moved. </b> </h1>
<h1 id="h2"> <b>This heading will not keep its click event after it is moved. </b> </h1>
<button id="b1"> Detach and append h1 element </button>
<button id="b2"> Remove and append h1 element </button>
</body>
</html>Output:
Once we click the button “Detach and append h1 element”, the output is:
Once we click another button, “Remove and append h1 element”, the output is:
Next, further when we click the button “Detach and append h1 element”, the output is:
Farther, when we click both text headings, the output is:
So as in the above output, the first text is not animated (removes the inner data and events), whereas the second text keep animation (does not remove the inner data and events) remained kept the data and events after detach method is applied, which is the difference between jQuery remove() method and jQuery remove() method.
Conclusion
- The jQuery detach() method detaches or removes the selected elements.
- It is a built-in method of jQuery.
- The detach() method keeps a copy of the removed HTML elements, allowing users to reinsert them based on the requirement after some time.
- Two alternative methods to the jQuery detach() method are the jQuery remove() method and the jQuery empty() method. However, there are differences between them. The jQuery remove() method removes the HTML elements and their data and event related to the elements. The jQuery empty() method removes only content from the HTML elements.
- The syntax of a detach() method is $(selector). detach() – Users use this method to remove a selected element. This method does not accept any parameters.
- The $(selector).detch() – This method accepts no parameters.
Recommended Articles
We hope that this EDUCBA information on “jQuery detach()” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
