Compare jQuery empty and remove Methods with 2 Examples

The empty method

The jQuery empty method is used to remove the child elements of the given element. The jQuery has another method to delete elements called remove method, however, it removes the parent element as well.

See an empty method example

In this tutorial, we will show you how to use the empty method for different elements along with an example to see the difference with remove method, let us first look at the syntax of the empty method.

Syntax of empty method

The basic syntax of empty() to remove child element is:

$(“element”).empty();

Where an element can be a div, a paragraph, text boxes etc.

An example of $.empty method

The example below shows how to “empty” div element by using jQuery empty method. As you click on the button “Run empty Method” it will remove div child elements (two input boxes and a paragraph).

Experience this example online

You can see, the parent div element, that was specified in the click event of the button with empty method remains while all child elements are removed.

jQuery empty vs remove method

The following example shows the difference between the empty and remove methods of jQuery. As mentioned earlier, the empty method removes only child elements of the specified element whereas the remove method will remove both parent and child elements.

In the example, we have two div parent elements. Both has similar child elements. You can see two buttons on the example page. One button is to execute the empty method while other to execute remove method.

Click on both buttons one by one and see the difference yourself.

To open the example page, click the following link or image:

jQuery empty

Experience this example online

Further Reading: jQuery remove method