Contents
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().

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion

- Professional service
- Flexible timetables
- A variety of features to choose from
- Professional certificates of completion
- University-level courses
- Multiple Online degree programs

- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
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:
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:
Method | Definition |
---|---|
.empty() | Removes the content and child elements from the selected element, but does not remove the element itself. |
.detach() | Removes all child elements with the selected element, but keeps data and event handlers, so you may re-add them at a later time. |
.remove() | Removes all child elements, data and events with the selected element. |
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();
});
Latest Udacity Coupon Found:
75% OFF COURSES
Udacity Black Friday Offer
The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!