jQuery remove() vs detach() Method

Last Updated:

jQuery remove() vs detach() Methods

The jQuery remove() method removes all bound events and jQuery data associated with it.

The jQuery detach() method keeps all bound events and jQuery data associated with it.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery remove() vs detach() Method</h1> <p id="myRemove">Remove - Click 'Remove' button and click on this paragraph.</p> <p id="myDetach">Detach - Click 'Detach' button and click on this paragraph.</p> <button id="btn1">Remove</button> <button id="btn2">Detach</button> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("body").append($("#myRemove").remove()); }); $("#btn2").click(function(){ $("body").append($("#myDetach").detach()); }); $("p").click(function(){ alert("You click"); }); }); </script> </body> </html>

Share this Page

Meet the Author