The detach() method in JQuery is used to delete the element and its child elements from an HTML element.
<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>
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.