Learnerslesson
   JAVA   
  SPRING  
  SPRINGBOOT  
 HIBERNATE 
  HADOOP  
   HIVE   
   ALGORITHMS   
   PYTHON   
   GO   
   KOTLIN   
   C#   
   RUBY   
   C++   
   HTML   
   CSS   
   JAVA SCRIPT   
   JQUERY   




HTML METHODS - detach()


The detach() method in JQuery is used to delete the element and its child elements from an HTML element.


Example :



<html>
    <head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<div class = "outerClass" style = "background-color : violet; height : 130px">
    		Inside outer div class
    		<div class = "innerClass" style = "background-color : orange; height: 100px">
    			Inside inner div class
    			<p style = "background-color : green">
                	New Code
                </p>
    		</div>
    	</div>		
    	
    	<button> Click to delete </button>
    	

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
      		$('button').click( function() {
				$('.outerClass').detach();
			});
			            
      	</script>      
   </body>
</html>


Output :




Now, if you see the output, even here the elements along with the violet box got removed.


That is because the detach() method deletes the actual element along with its child element.