jQuery Remove Elements & Attribute

We will learn how to remove the HTML elements or its contents as well as its attribute from the document using jQuery.

Remove Elements/Content

There are mainly two jQuery methods to remove elements and content from existing HTML elements.

• remove() -Removes the selected element (and its child elements)
• empty() -Removes the child elements from the selected element

jQuery empty() Method

The jQuery empty() method removes all child elements as well as other descendant elements and the text content within the selected elements from the DOM.

jQuery remove() Method

The jQuery remove() method removes the selected elements from the DOM as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.

Filter the Elements to be Removed

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 syntaxes.

The example: to removes all <p> elements with class="hello":

This example removes all <p> elements with class="test" and class="demo":

Note: According to the W3C (World Wide Web Consortium) DOM specification, any string of text within an element is considered a child node of that element.

We will learn to add and remove CSS class in jQuery in next chapter Click