Wrapping, replacing, and removing content

The JQuery provide efficient ways for wrapping, replacing, and removing DOM contents. These are given below :

Wrapping html contents

Click here to know about wrapping DOM

DOM Removal

The methods in this category allow us to delete elements from the DOM.

.detach( )

This method remove the filtered element from the DOM.

Example :

$("p").detach();

It will remove all the 'p' element from the DOM.

.empty( )

It will remove all the child nodes from the filtered elements.

Example :

$("p").empty();

It will remove all the child nodes from the 'p'.

.remove( )

It will remove the set of matched elements from the DOM. We use .remove() when we want to remove the element itself, as well as everything inside it.

Example :

$('.hello').remove();

It will remove all the elements whose name is 'hello'.

.unwrap( )

The .unwrap() method removes the element's parent from the matched set .It leaves the matched element at their place.

Example :

$("p").unwrap();

This script removes the parent of 'p'.

DOM Replacement

The methods fall under this category is used to replace the Dom content from new content.

.replaceAll( )

This method replace all the filtered element with provided element.

Example :

$('<h2>New heading</h2>').replaceAll('.inner');

It replace all the element of 'inner ' class with '<h2>New heading</h2>'.

.replaceWith( )

This method replace each element in the set of matched elements with the provided new content. 0

Example :

$('.second').replaceWith('<h2>New heading</h2>');

It replace all the element having 'second' class with '<h2>New heading</h2>'.

Learn from experts! Attend jQuery Training classes.

Wrapping, replacing, and removing content