The jQuery API .empty() method will remove all child nodes from the element specified by the selector that exists in the document. It leaves the parent element in the document, but removes all child elements. By removing all child elements, you automatically remove the descendants of these child elements as well. 

This is different from the .hide() method because .empty() actually removes the elements from the HTML. The .hide() method just sets the element to display: none, which can be undone by .show().

The .empty() method does not accept arguments, you do not place any parameters inside of the parentheses following .empty.

 

Here is an example of using the jQuery .empty() method:

$("#dumpIt").click(function(){
    $("#clearOut").empty();
});

Here is the HTML for the example:

<button id="dumpIt">Dump It</button>
<hr/>
<div class="clearOut">
    <p>Set 1</p>
    <p>Quia voluptas sit, aspernatur aut odit aut fugit.</p>
    <p>Ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
<hr/>
<div class="clearOut">
    <p>Set 2</p>
    <p>Quia voluptas sit, aspernatur aut odit aut fugit.</p>
    <p>Ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
<hr/>
<div class="clearOut">
    <p>Set 3</p>
    <p>Quia voluptas sit, aspernatur aut odit aut fugit.</p>
    <p>Ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>

Here is the result, click on the button that reads "Dump It" and it will empty the child elements of all of the elements with class="clearOut".