Most of the times, these methods are confused with each other or are thought of as performing the same functionality. But,
remove() removes the selected element and all its child elements whereas
empty() removes only the child elements from the selected element. Moreover, we can also filter the element to be removed in a specific class by giving a parameter of that class to the remove() function. We will see the difference by example:
$("#divTwo").remove(); //remove the selected element and its child elements. $("#divDetail").empty(); //remove the child elements of the selected element and make it empty $("p").remove(".country"); //remove all <p> elements with class="country"
From the name and example, it is easy to understand that empty will remove all child elements and make the main element empty. It won’t actually remove the main element but make it empty by removing all its child elements. Now, we can easily differentiate between the two.