jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery - Remove Elements

One very important part of jQuery is the possibility to manipulate the DOM.

jQuery provides many handful methods, to remove existing HTML elements or contents from the document.

In this chapter we will explain how to remove HTML elements/content from the DOM.


jQuery Remove Elements/Content

With jQuery we can easily remove HTML elements.

We have the following jQuery methods that are used to remove elements and content:

The following section will show you how to use each method.


jQuery remove() Method

The jQuery remove() method removes the selected element(s) and its child element(s) from the DOM.

The following example removes all paragraphs from the DOM:

Run code

The jQuery remove() method also accepts one parameter, which allows you to filter the elements to be removed.

The parameter can be any of the jQuery selector.

The following example removes all paragraphs that contain "Hello" from the DOM:

Run code

jQuery empty() Method

The jQuery empty() method removes all child nodes (including text nodes) from the selected elements.

The following example removes all child nodes (including text nodes) from all paragraphs:

Run code

Note: This method does not remove the element itself, or its attributes.


jQuery unwrap() Method

The jQuery unwrap() method removes the parent element of the selected elements.

The following example removes the parent element of all paragraphs:

Run code

jQuery Remove Attributes - removeAttr()

The jQuery removeAttr() method removes one or more attributes from the selected elements.

The following example removes the href attribute from all hyperlinks:

Run code

To remove several attributes, separate the attribute names with a space.

The following example removes multiple attributes from all paragraphs:

Run code

jQuery HTML Reference

For a complete HTML methods reference, visit our jQuery HTML/CSS Reference.