jQuery DOM Removal

jQuery .detach() Method

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.

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

jQuery .empty() Method

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

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

The above example will produce the following output

jQuery .replaceWith() Method

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

The above example will produce the following output

jQuery .replaceAll() Method

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

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

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

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