This tutorial explains the difference between the three methods detach, remove and hide used in the JQuery programming with simple examples. If you have any questions, please write it in the comments section.
JQuery Detach() Method
JQuery detach() method helps in removing the selected elements including all text and child nodes from the DOM. This method is same as remove method except it will keep all data and events associated with the removed elements even after it is removed from the DOM(Document Object Model). It stores all the data associated with the element and is used to reinsert the elements data and event handlers.
JQuery Detach() Syntax
$(selector).detach();
It does not contain any parameters.
JQuery Detach() Example
<!doctype html> <head> <title>JQuery Detach Method</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <h2>JQuery Detach Method Example</h2> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h3,h4").detach(); }); }); </script> <body> <button>Click to remove elements</button> <h3>Hello World!!!!!!!</h3> <h4>Welcome to JQuery!!!</h4> </body> </html>
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- $(“button”).click(function()) line defines click event which occurs when button is clicked.
- $(“h3,h4”).detach(); line defines the detach() method which removes all the elements from the DOM.
- When we run the above script, a button will appear on the browser. If we click on the button, all elements will get removed from the DOM.
When you run the above example, you would get the following output:
JQuery Remove() Method
The remove() method is same as detach() method which removes the selected elements including all text and child nodes from the DOM. But it won’t keep all data and events associated with removed elements in the set of matched elements from the DOM completely. It restores elements data , not its event handlers. All events and data associated with elements are removed.
JQuery Remove() Syntax
$(selector).remove();
It does not contain any parameters.
JQuery Remove() Example
<!doctype html> <head> <title>JQuery Remove Method</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <h2>JQuery Remove Method Example</h2> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h3,h4").remove(); }); }); </script> <body> <button>Click to remove the elements</button> <h3>Hello world!!!</h3> <h4>Welcome to JQuery!!!</h4> </body> </html>
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- $(“button”).click(function()) line defines the click event which occurs when button is clicked.
- $(“h3,h4”).remove(); line defines the remove() method which removes the selected elements from the DOM.
- When we run the above script, a button will appear on the browser. If we click on the button, all elements will get removed from the DOM.
When you run the above example, you would get the following output:
JQuery Hide() Method
The hide() method is used to hide elements from the DOM completely. The elements will be hidden immediately with no animation. The elements will not display once user hides the elements in the DOM. This is equivalent to calling CSS display property to none. i.e. .css(‘display’, ‘none’).
JQuery Hide() Syntax
$(selector).hide(speed, callback);
It has parameters called speed which specifies speed of the hiding effect and can take possible vales such as slow, fast and callback is a function which is to be executed after the hide() method completes.
JQuery Hide() Example
<!DOCTYPE html> <html> <head> <title>JQuery Hide Method</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <h2>JQuery Hide Method Example</h2> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("button").hide("fast",function(){ $("#message").text("The button is hidden now!!!"); }); }); }); </script> <body> <p id="message"></p> <button>After clicking on this button, it will get hidden.</button> </body> </html>
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- $(“button”).click(function()) line defines the click event which occurs when button is clicked.
- $(“button”).hide(“fast”,function()) line defines the hide() method which is going to hide elements from the DOM completely. It takes value called fast which defines speed of the hiding effect and defines a function which is to be executed after the hide() method completes.
- When we run above script, a button will appear. After clicking on the button, it will be hidden from the DOM and specified message will get display after button is hidden.
When you run the above example, you would get the following output:
Differences Between Detach(), Remove() and Hide() Methods
Detach() | Remove() | Hide() |
---|---|---|
It helps in removing the selected elements including all text and child nodes from the DOM. | It also removes set of matched elements including all text and child nodes from the DOM. | It hides elements from the DOM completely. |
It keeps all data and events associated with selected elements. | It won’t keep all data and events associated with selected elements. | The matched elements will be hidden immediately with no animation. |
It reinsert the elements data and event handlers. | It restores elements data, not its event handlers. | It will not display the elements once it hides the elements in the DOM. |