jQuery DOM Removal

Last Updated Jul 21, 2015, 12:00:06 PM





jQuery .detach() Method

jQuery detach() method is used to remove the selected HTMLelements from the DOM tree.

Syntax

The jquery detach() method is same as jquery remove() method but the only difference is, detach method keeps the data of removed elements. In case, If you want to reinsert the removed elements back to the DOM, you can easily do that using detach() method since it keeps the those removed DOM element ids.


Example

Note that, in the above HTML code we have two different texts in two p tags and one bold text in b tag

Using the below jquery detach() method, we can simply target those two p elements and toggle them by removing and adding back again


Try It Now

jQuery .empty() Method

jQuery empty() method used to empty all the child nodes of matched HTMLelements from the DOM tree.

jQuery empty() method empty all the child elements as well as the text content in the matched element.

Syntax

Here is the example about how to use jQuery .empty() method

Example

The above example will produce the following output


jQuery empty() method >
Try It Now

jQuery .replaceWith() Method

jQuery .replaceWith() method is used to replace each HTMLelement with new content from the matched elements in the DOM tree.

Syntax

The jquery .replaceWith() method removes the content from DOM and inserts new content in its place with a single call.

How to use jQuery replaceWith() Method

Example
Output

The above example will produce the following output


jQuery replaceWith() method
Try It Now

jQuery .replaceAll() Method

jQuery replaceAll() method will replace all HTML elements in the DOM tree with new HTML elements

Syntax

The jquery .replaceAll() method is similar to .replaceWith(), but with the source and target is reversed.

Example
jQuery

The above jQuery replaceAll() method will replace all the existing paragaphs and its text with new h1 text supplied in the jquery code

Output

The above jquery replaceAll() method example will produce the following output


jQuery replaceAll() method
Try It Now

jQuery DOM Reference

Other Advanced jQuery and DOM topics you might want to learn
jQuery Basic DOM Methods

jQuery DOM Removal

jQuery DOM Insertion Inside

jQuery DOM Insertion Outside

jQuery DOM Insertion Around

Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM