jQuery detach() Method

jQuery | detach() Method: Learn about the jQuery detach() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 15, 2022

detach() Method

When we want to remove some content from the web page, we can use different methods of jQuery – remove(), empty(), detach(), etc. These all have some minor differences amongst them but overall do the same job. Therefore, let's have a look at the detach() method. This method just removes the text of the element selected and all of its related child nodes. This method does not delete the data and the event handlers attached to it. It basically helps to create a copy that the user can attach anywhere else whenever needed.

detach() Method Syntax

$('selector').detach();

This method does not take any parameter, we just need to specify the selector for the targeted element. It will return the selected element but without the child nodes and text content. The below given example explains the usage of the detach() method. When the detach button is clicked, it will remove the content of that particular selector.

jQuery detach() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      .bold{
      font-size: larger;
      font-weight: bolder;
      color: green;
      }
      .color{
      font-size: larger;
      font-weight: bolder;
      color:darkblue;
      }
    </style>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - Detach</h2>
    <p>Click the button to detach some of the selected elements.</p>
    <button>Detach</button>
    <hr>
    <p class="bold">This is sentence in green.</p>
    <div class="color">This is sentence in blue.</div>
    <h4 class="bold">This is sentence in green.</h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('.color').detach();
        })
    });
  </script>
</html>

Output:

jQuery empty() Method

jQuery scrollTop() Method

Comments and Discussions!

Load comments ↻