In this tutorial we  are going to understand JQuery Remove Elements. Remove Elements in JQuery also as simple as adding the elements. In the previous tutorials, we have discussed about how to add the elements in JQuery.

JQuery Remove Elements :

We can remove the elements using the following methods :

• remove()
• empty()

JQuery remove() :

JQuery remove() is used to remove the selected element and its content (its child elements too).

$("#target").remove();

The above example is used to remove the element which is having id as target, and its child elements. It does permanent remove operation, once the remove() operation is happen, we can not get that elements back on DOM.

If we want to delete only the matched element, not to child elements. We can go with JQuery detach().

JQuery detach() :

JQuery detach() is used to delete the matched element only. It doesn’t delete the content of the matched element. detach() keeps all jQuery data associated with the removed elements.

This method is useful when removed elements are to be reinserted into the DOM at a later time. We can re attach the detached data using attach() method.

$("#target").detach();

JQuery removeClass() :

JQuery removeClass() is a legacy method. Which is used to remove the one or more class names for a matched elements.

$("#target").removeClass("class1");

OR

$("#target").removeClass("class1 class2");

JQuery empty() :

JQuery empty() is used to remove the child elements of matched element. This method is not used to remove selected elements or attributes.

$("#target").empty();

Even though empty() method is used to remove the child elements, it is also used to remove any content inside the matched elements.

Happy Learning 🙂