jQuery detach()

The jQuery remove() method removes the elements as well as its data and events. While, the jQuery empty() method removes only the content from the selected elements. The jQuery detach() method is also used to serve the purpose of removal. The feature that make this method unique from the rest two is that, this method saves a copy of the removed elements to reinsert them if needed later.

The jQuery detach() method removes the selected elements, but keeps data and events.

Syntax:

$(selector).detach() 

Example 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
	$("p").detach();  
  });  
});  
</script>  
</head>  
<body>  
<p>Hello Guys!</p>    
<button>Click me</button>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Example 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script>  
$(document).ready(function(){  
	$("#btn1").click(function(){  
    	$("body").append($("#p1").detach());  
	});  
	$("#btn2").click(function(){  
    	$("body").append($("#p2").remove());  
	});  
	$("#btn2").click(function(){  
    	$("body").append($("#p3").empty());  
	});  
 
});  
</script>  
</head>  
<body>  
<p id="p1">Hey!</p>  
<p id="p2">Hello!</p>
<p id="p3">Hii!</p>  
<button id="btn1">Detach and append</button>  
<button id="btn2">Remove and append</button> 
<button id="btn2">Empty and append</button> 
</body>  
</html>

Try it

JS Bin on jsbin.com

Please Share