Learning jQuery

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>

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>

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.