Clear or Empty a DIV element using jQuery empty() method

Using jQuery empty() method, we can remove a text string or an entire sentence inside any element. When I am saying any element, I mean all the child nodes, nested inside the DIV element. Here in this post I’ll show you how to use jQuery empty() method to clear all the contents inside a DIV element.

Clear the Contents of DIV using empty method and setTimeout

You can clear or empty a DIV element using plain old JavaScript 🚀. Check this out.

jQuery .empty() Method syntax

$(selector).empty()

The jQuery empty() method does not remove the elements. It simply clears or removes the contents of the elements. It is different from the .remove() method in jQuery, which removes all the elements.

Note: You can use .empty() method with other elements too.

Let us see how it works.

In the first example, I’ll show you its basic functions, such as, how to clear all the contents inside the DIV and how to clear contents of each child element.

In the second example, I’ll show how you can clear the contents of a DIV element with a delay of few seconds using the setTimeout() method.

The Markup

In the markup section, I have a DIV element, serving as a container. It has two more elements such as a <p> and <span>. I also have an <input> element of type button.

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <div id="myDiv">
        A sentence inside a DIV element <br />
        <p>This is inside P element</p>
        <span>This is inside a SPAN element</span>
    </div>

    <input id="btClear" type="button" value="Clear all the Contents" />
</body>

<script>
    $(document).ready(function () {
        $('#btClear').click(function () {
            $('div').empty();
        });
    });
</script>
</html>

Try it

It’s a simple example. The button click will clear all the contents inside the DIV and its child elements or nodes.

jQuery empty() with Multiple Element Selectors

Now, what if you want to clear the contents of a specific child node only, lets say the contents of <p> element(s). You can do this by simply adding another element "selector" with the DIV selector. Like this …

$('div p').empty();

While adding the selector p with div, I am ensuring that it clears only the contents inside <p> element (you can have more p’s and clear all its contents). The other sentences remain as it is.

Using jQuery empty() Method with setTimeout()

Finally, here’s an example where I am using empty() method to clear the contents of the DIV with a delay of few seconds. For the delay, I am using setTimeout() method. It depends on why you use it.

<script>
    $(document).ready(function () {
        $('#btClear').click(function () {

            var timeDelay = 5000;       // DELAY IN MILLISECONDS (OR SIMPLY, 5 SECONDS DELAY).
            setTimeout(clearContents, timeDelay);

            function clearContents() {
                $('div').empty();
            }
        });
    });
</script>

See this demo

Unlike the previous examples above, I have written the .empty() method inside a function. Since, the setTimeout() method takes two parameters. The first parameter is the function that it would call and second parameter is the "duration" (in milliseconds).

It would now clear the all the contents inside the DIV in precisely 5 seconds.

← PreviousNext →