❮❮ PREV NEXT ❯❯

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://ajax.googleapis.com/ajax/libs/jquery/3.7.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.

❮❮ PREV NEXT ❯❯