Search within TutorialsPark

Jquery Removing Elements


Learn to use jQuery to remove elements completely from the DOM.


jQuery DOM Manipulation: Removing Elements

jQuery provides several methods which allows you to remove elements from the DOM.


Table : Methods for Removing Elements

Method Description
detach() To remove elements from the DOM. The data associated with the elements is preserved.
empty() To remove all of the child nodes from each element in the jQuery object.
remove() To remove elements from the DOM.As the elements are removed, the data associated with the element is destroyed.
unwrap() To remove the parent of each of the element in the jQuery Object.

Remove Elements from the DOM using remove() Method

The jQuery Method remove() is used to remove the set of matched elements from the DOM.

Optionally, a selector can be used to filter the set of matched elements to be removed.

Example: Remove Elements from the DOM using remove() Method

Give it a TRY! » Note: The remove() method also removes anything else associated with elements - say events.


Detaching Elements using detach() Method

The method detach() works similar as remove() , except that the data associated with the elements as preserved.

Example: Detaching Elements using detach() Method

Give it a TRY! » Note:If you need to reinsert an element you can do it with detach()


Empting Elements using empty() method

The jQuery method of empty() is used to remove all child nodes of the set of matched elements from the DOM.

It removes not only child(and other descendant) element, but also any text within the set of matched elements.

Example: Empting Elements using empty() method

Give it a TRY! » Note: Any string of text within an element is considered a child node of that element.


Unwrapping Elements using unwrap() method

The jQuery method of unwrap() is used to remove parents of the elements in the jQuery Object.

It removes not only child(and other descendant) element, but also any text within the set of matched elements.

Example: Unwrapping Elements using unwrap() method

Give it a TRY! » Note: The method unwrap() simply removes the parent of the element it is called on.