Comparing jQuery empty, hide, remove and detach functions

jQuery is the best javascript library of all time. It reduces the size of code to do a task with javascript. jQuery has lot of in-built functions. I’m comparing four functions such as .empty(), .hide(), .remove() and .detach() in this article to make you understand which function should be used in which place.

jquery-empty-hide-remove-detach

Confusion

The similarity in these four functions is that they remove the specified elements from certain place. But there is distinct difference between these four functions.

Each function has its own purpose which I’m going to explain to you with examples.

.empty()

empty function basically deletes all the content inside of the selector. For instance, say you have a paragraph in your page. If you want to empty the text inside of the paragraph tag whenever a button is clicked, you can use jquery empty function to do that.

The parent tag will remain as it is. In this case paragraph tag stays as it is but the text will be deleted.

Example


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#empty").click(function () {
 //only the content inside of the element will be deleted
 $(".p1").empty();
 });
 });
 </script>
</head>
<body>
<p class="p1">this is a text</p>
<button id="empty">Empty</button>
</body>
</html>

.hide()

hide function doesn’t actually remove an element from DOM. But it hides the element from the display. Whenever the hide function executed for a selector it will add “display:none;” style parameter to that element.

So you can show that element whenever you want using .show() function (There are other functions also to do this).

Example


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#hide").click(function () {
 // Just hiding element from display only
 $(".p2").hide();
 });
 $("#show").click(function () {
 // Showing the element again
 $(".p2").show();
 }); 
 });
 </script>
</head>
<body>
<p class="p2">this is a text</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

.remove()

Like its name it removes the element completely from DOM. If you want an element to be completely deleted and it shouldn’t be needed again, you can use this remove function.

Example


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#remove").click(function () {
 //completely removing element from DOM
 $(".p3").remove();
 }); 
 });
 </script>
</head>
<body>
<p class="p3">this is a text</p>
<button id="remove">Remove</button>
</body>
</html>

.detach()

Finally the detach function does the same as remove function but the difference is you can retrieve the removed element later.

For example, say you have removed a paragraph from the DOM but the function will keep the deleted element. If you want you can insert it anytime.

Example


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#detach").click(function () {
 //saving detached object to a global variable
 p = $( ".p4" ).detach();
 });
 
 $("#attach").click(function () {
 //inserting detached object after .p3br element
 $( "#detach" ).before(p);
 });
 });
 </script>
</head>
<body>
<p class="p4">this is a text</p>
<button id="detach">Detach</button>
<button id="attach">Attach</button>
</body>
</html>

Conclusioin

To say the differences in one sentence, empty function removes the child elements, hide function hides the element from display, remove function completely deletes from DOM and detach function keeps the element after removal.

Note: all these removal are done in run time only. If you refresh the page all the deleted elements will come back to the place. If you want the change to be affected permanently, you have to store the changes somewhere.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

One comment on “Comparing jQuery empty, hide, remove and detach functions”

Leave a Reply

Your email address will not be published. Required fields are marked *