jQuery empty() vs remove()

jQuery provides 2 methods empty() and remove() to remove the elements from DOM. I have seen the programmers getting confused between both the methods.

empty() method removes all the child element of the matched element where remove() method removes set of matched elements from DOM. Confused? Let me explain you with an example.
There are 2 div elements "dvParent" and "dvChild".
<div id="dvParent">
     Parent Div
    <div id="dvChild">
    <p> jQuery By Example: Demo of empty() vs remove() method.
    </div>
</div>
Now when we call empty() method on "dvChild", then it will remove all the child element of div.
 $('#dvChild').empty();
Result will be:
<div id="dvParent">
     Parent Div
    <div id="dvChild">
    </div>
</div>
See live Demo and Code.
Now when remove() method is called on "dvChild" element then it will not only remove the child element but it will also remove the "dvChild" element from DOM.
 $('#dvChild').remove();
Result will be:
<div id="dvParent">
     Parent Div
</div>
See live Demo and Code.
So the difference between both the method is that empty() remove only the child element of the element on which the method is called where remove() method removes not only the child but also the element on which it is called.

Feel free to contact me for any help related to jQuery. I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..