Introduction to jQuery detach()
The ‘detach()’ is a pre-defined method in jQuery that is used for removing 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 jQuery remove() method and the jQuery empty(), and these methods have their own unique properties with slight alterations from the detach() method.
Syntax:
$(selector). detch( )
This method is used to remove a selected element. This method does not accept any parameters.
Examples of jQuery detach()
Below are the examples of the jQuery detach( ) method:
Example #1
Example of jQuery detach( ) method without any parameters. Next, we write the HTML code to understand the jQuery detach ( ) 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.
4.5 (4,580 ratings)
View Course
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 again the same button, the output is:
Example #3
Example for jQuery detach( ) method 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 texts heading, the output is:
So as in the above output the first text is not animated (remove 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 applied, which is the difference between jQuery remove( ) method and jQuery remove( ) method.
Conclusion
- The jQuery detach( ) method uses to detach or remove the selected elements.
- It is a builtin method of jQuery.
- This method’s removed elements can be reinserted after some time based on the requirement as the detach( ) method keeps the copy of removed HTML elements.
- There are two more methods that can be used alternative to the jQuery detach( ) method are jQuery remove( ) method and jQuery empty( ) method but there is some difference between them. The jQuery remove( ) method which is used to remove the HTML elements but also remove its data and event related to the elements. The jQuery empty( ) method uses to remove only content from the HTML elements.
- The syntax of a detach( ) method is $(selector). detach( ) – This method is used to remove a selected element. This method does not accept any parameters.
- The $(selector). detch( ) – This method does not accept any parameters.
Recommended Articles
This is a guide to jQuery detach(). Here we discuss the introduction, syntax, and various examples of jQuery detach() along with code implementation. You may also look at the following articles to learn more-
