BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery empty()

Last Updated: July 14, 2022 by Chaitanya Singh | Filed Under: jQuery

The jQuery empty() method removes the content of the selected elements. If the selected elements have any child nodes, empty() method removes those child nodes as well. This method doesn’t remove the element itself, it just removes the content of the element.

Note: If you want to remove the elements along with the data and events, use remove() method instead.

If you only want to remove the selected element and do not want to remove the data and events then use detach() method instead.

Syntax of empty() method

$(selector).empty()

$(selector), selected the elements that require the content to be removed. Read more about jQuery selectors here.

Example 1: jQuery empty() method

In the following example, we have a div element and there are some elements on the page that are inside this ‘div’ such as a p element and a list. We are using the empty() method to clear the content of div element.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").empty();
  });
});
</script>
</head>
<body>

<div style="height:150px;">
<p>Paragraph inside div element.</p>
List inside div element:
<ul>
<li>ListItem1</li>
<li>ListItem2</li>
<li>ListItem3</li>
<li>ListItem4</li>
</ul>
</div>

<p>Paragraph outside the div element.</p>

<button>Remove the content inside div element</button>

</body>
</html>

Output:
Before button click:
jQuery empty()
After button click: As you can see the paragraph and list inside ‘div’ element are removed from the page and the elements outside ‘div’ are still on the page.
jQuery empty()

Example 2: jQuery empty() method – Remove content of ‘this’ element

In the following example, we are removing the content of ‘this’ element. Here keyword ‘this’ represents the current element. In the above example, we specifically mentioned ‘div’ element while using empty(). Here we are using ‘this’ to apply empty() on any element that is being interacted by the user.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).empty();
  });
});
</script>
</head>
<body>

<p><b><i>Paragraph 1: click here to remove it</b></i></p>
<p><b><i>Paragraph 2: click here to remove it</b></i></p>
<p><b><i>Paragraph 3: click here to remove it</b></i></p>

</body>
</html>

Output:
Before any click:
jQuery empty() method
After the user clicks on ‘Paragraph 2’: When the user clicked on the second paragraph, it got removed from the page.
jQuery empty() method

❮ jQuery remove()

Top Related Articles:

  1. jQuery html() method
  2. jQuery removeClass() Method
  3. jQuery prepend()
  4. jQuery val()
  5. jQuery after() Method

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap