jQuery detach()

The jQuery detach() method is used to remove the selected elements, including all texts and child nodes and keeps only data and events.

This method saves a copy of the removed elements to reinsert them whenever they needed later.

There are some other methods also which are used to remove elements e.g. jQuery remove() method, jQuery empty() method etc. But there is a little difference among them.

jQuery remove() method: This method is used to remove the elements as well as its data and events.

jQuery empty() method: This method is used to remove only the content from the selected elements.

Syntax:

Example of jQuery detach() method

Let's take an example to demonstrate the effect of jQuery detach() method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").detach();
  });
});
</script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button>Click here to detach all p elements</button>
</body>
</html> 

Test it Now

jQuery detach() example 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>detach demo</title>
  <style>
  p {
    background: lightpink;
    margin: 6px 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is javatpoint.com</p>
<button>Click here to Attach/detach all p elements. </button>
<script>
$( "p" ).click(function() {
  $( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
  if ( p ) {
    p.appendTo( "body" );
    p = null;
  } else {
    p = $( "p" ).detach();
  }
});
</script>
</body>
</html>

Test it Now

Difference between detach() and remove() method

Let's take an example to clear the difference between detach() and remove() method:

jQuery detach() example 3

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("body").append($("#p1").detach());
    });
    $("#btn2").click(function(){
        $("body").append($("#p2").remove());
    });
    $("p").click(function(){
        $(this).animate({fontSize: "+=1px"})
    });
});
</script>
</head>
<body>
<p id="p1"><b>This paragraph will keep its click event even after it is moved.</b></p>
<p id="p2">This paragraph will not keep its click event after it is moved.</p>
<button id="btn1">Detach and append p element</button>
<button id="btn2">Remove and append p element</button>
</body>
</html>

Test it Now

By the above example, it is clear that jQuery detach() method doesn't remove inner data and events. In the above example, the click event is remained safe even after the detach() method is applied.

Next TopicjQuery scrollTop()

← prev next →

jQuery Tutorial

jQuery Effects

jQuery HTML/CSS

jQuery Form

jQuery Events

jQuery UI

Interview Questions

jQuery detach()

Example of jQuery detach() method

jQuery detach() example 2

Difference between detach() and remove() method

jQuery detach() example 3

By the above example, it is clear that jQuery detach() method doesn't remove inner data and events. In the above example, the click event is remained safe even after the detach() method is applied.