jQuery empty() Method Example - Clear or Empty DIV Contents with a Delay using setTimeout() 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 with a delay of few seconds using setTimeout() method.

Clear the Contents of DIV using empty method and setTimeout

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 jQuery method .remove(), 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 JavaScript 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.

<!DOCTYPE html>
<html>
<head>
    <title>Clear DIV using jQuery .empty()</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
    <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>

    <br />

    <input id="btClear" type="button" value="Clear Contents" />
</body>
The Script
<script>
    $(document).ready(function () {
        $('#btClear').click(function () {
            $('div').empty();
        });
    });
</script>
</html>

Try it yourself

A sentence inside a <div> element

This is inside <p> element

This is inside a <span> element only

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();

Try it yourself

A sentence inside a <div> element

This is inside <p> element

This is inside a <span> element

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 JavaScript 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>

Try it yourself

A sentence inside a <div> element

This is inside <p> element

This is inside a <span> element only

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.

That’s it. Hope you find the examples useful. Let me know your opinion. Thanks for reading.

Related Posts:

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!