empty()

The jQuery empty() method is used to remove all child nodes and content from the selected elements. This method doesn't remove the element itself.

Note

If you want to remove the element without removing data and events, you should use the detach() method.

Note

If you want to remove the element as well as its data and events, you should use the remove() method.

Syntax:

snippet

$(selector).empty()

Example of jQuery empty() method

Let's take an example to demonstrate the jQuery empty() method.

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").empty();
    });
});
</script>
</head>
<body>
<div style="height:150px;background-color:yellow">
Twinkle, twinkle, little star,<br/>
How I wonder what you are!</br>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
<p><b>This poem is written inside the div.</b></p>
</div>
<p>This paragraph is written outside the div.</p>
<button>Execute empty() method to remove the content of div element.</button>
</body>
</html>

jQuery empty() example 2

snippet

<!DOCTYPE html>
<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
      $(document).ready(function() {
         $("div").click(function () {
            $(this).empty();
         });
      });
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click any of the box given below to see the result:</p>
<div class="div" style="background-color:yellow;">Click me!</div>
<div class="div" style="background-color:green;">Click me!</div>
<div class="div" style="background-color:red;">Click me!</div>
</body>
</html>