Removing Child Elements With jQuery .empty()

jQuery empty: Main Tips

• The jQuery .empty() method removes all descendant nodes from selected DOM elements.
• All strings of text are also considered child elements and thus removed.
• To remove elements completely, use the .remove() method. To remove them but keep their data and event handlers, use .detach().

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Usage of jQuery .empty() Explained

The .empty() jQuery method removes the children and nodes of the specified elements. All you need to do is specify a selector to match the target elements:

$(selector).empty();

Check the example with the selector defined as <p> below:

$(document).ready(() => {
	$("button").click(() => {
	    $("p").empty();
	});
});

Note: if you make jQuery remove all children elements, nested elements will be deleted as well.

Differences Between jQuery .empty(), .detach() and .remove()

There are three methods used for removing elements in jQuery: .empty(), .detach() and .remove(). A beginner might find it a bit confusing. You will find the differences of these methods explained in the table below:

Compare the methods in the example below:

$(document).ready(function () {

  $("button.btn-remove").click(function () {
    $("#textbox1").remove();
  });

  $("button.btn-empty").click(function () {
    $("#textbox2").empty();
  });

  $("button.btn-detach").click(function () {
    $("#textbox3").detach();
  });