jQuery Remove Element

A very important part of jQuery is manipulating the DOM.

jQuery provides many methods to remove existing HTML elements or content from the document.

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

jQuery delete elements/Content

With jQuery, we can easily delete HTML elements.

We have the following jQuery methods for deleting elements and content:

• remove()

• empty()

• unwrap()

Below, I will show you how to use each method.

jQuery remove() method

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

The following example removes all paragraphs from the DOM:

$("button").click(function(){
　　$("p").remove();
});

jQuery remove()The method also accepts a parameter that allows you to filter the elements to be removed.

This parameter can be any jQuery selector.

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

$("button").click(function(){
　　$("p").remove(":contains('Hello')");
});

jQuery empty() method

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

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

$("button").click(function(){
　　$("p").empty();
});

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

jQuery unwrap() Method

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

The following example removes the parent element of all paragraphs:

$("button").click(function(){
　　$("p").unwrap();
});

jQuery Remove Attribute-removeAttr()

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

The following example removes the href attribute from all hyperlinks:

$("button").click(function(){
　　$("a").removeAttr("href");
});

To remove multiple attributes, separate the attribute names with spaces.

The following example removes multiple attributes from all paragraphs:

$("button").click(function(){
　　$("p").removeAttr("id class title");
});

jQuery HTML Reference

For a complete reference of HTML methods, please visit ourjQuery HTML / CSS Reference.