Prev Next

jQuery Empty

The jQuery empty() method removes all child elements and content from the selected elements, leaving the elements themselves intact. It is useful for clearing out containers dynamically without removing the container itself.

Key Topics

Basic Usage of empty()

The empty() method removes all child elements and text within the selected element.

$("#container").empty();

Explanation: This code clears all the child elements and content within the element with the ID container.

Dynamic Clearing

Use empty() dynamically in response to user actions such as button clicks.

$(".btn-clear").click(function() {
    $("#container").empty();
});

Explanation: This code listens for a button click event and clears the content of the container with the ID container dynamically.

Example: Using empty()


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Empty Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="container">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
    </div>
    <button class="btn-clear">Clear Content</button>

    <script>
        $(document).ready(function() {
            $(".btn-clear").click(function() {
                $("#container").empty();
            });
        });
    </script>
</body>
</html>

Explanation: This example demonstrates the use of empty() to clear the content of a container when a button is clicked, while leaving the container itself intact.

Key Takeaways

  • Content Removal: Use empty() to remove all child elements and text content of a selected element.
  • Efficient Clearing: Ideal for resetting or clearing containers dynamically without affecting the container's attributes or styles.
  • Interactive UIs: Combine empty() with event listeners for dynamic and responsive user interfaces.
Prev Next