Removing Existing DOM Elements

On a web page, we may want to temporarily or permanently remove certain elements for a variety of tasks. jQuery offers several useful methods with varying functionalities to remove, detach, and empty web page elements.

Let’s look at these methods in detail along with relevant examples and differences.

remove() method

Given a selector, the remove() method removes a set of matched elements from the DOM Tree. The method also returns a reference to the removed elements, which can be used later in the code.

For example, in the web page below, we remove the span element nested within a div element. In line 2 of the jQuery code, we assign a click event handler to the button element with text “Remove span.” In line 3 of the event handler function, we remove the span element using the remove() method and store the reference to the deleted element in the variable removedSpan. In line 4, we use removedSpan to generate an alert displaying the inner HTML of that deleted element.

Run the code below. In the web page output, click on the button element with text “Remove span.” An alert will be generated and the span element will disappear from the webpage.

detach() method

Given a selector, the detach() method temporarily removes or detaches the set of matched elements from the DOM Tree. Similar to remove(), it returns a reference to the detached elements. But in this case, we use this reference to reattach the element to the DOM tree.

The detach() method is usually used temporarily remove an element from the DOM tree, perform complex computations on it, and afterward attach it back to the DOM tree.

Let’s use the same example as above. But replace the remove() method with the detach() method in line 3. In line 4, we call the function complexComputations() and pass the reference of the detached element as an argument. The complexComputations() function is used for explanatory purposes only and performs no specific task. Next, we append the detached element back to the DOM tree in line 6. We place line 6 inside the window.setTimeout function so that the element is reattached after 5 seconds, in order to better visualize what happened.

Run the code below. In the web page output, click on the button element with text “Detach span.” Observe how the span element disappears for 5 seconds and reappears back on the web page.

Difference between remove() and detach()

Both the remove() and detach() methods return a reference to deleted elements. So, what exactly is the difference?

When we delete an element using remove(), all the event handlers attached to that element are also deleted. The detach() method, on the other hand, retains all the attached event handlers. So when using detach(), we can reattach detached elements to the DOM tree without losing all the events associated with that element.

Consider the web page below. We have a span and a p element with associated click event handlers that generate alert boxes when clicked (lines 2-8). When the button with the text “Remove span” is clicked, we remove the span element using the remove() method, and then attach it back to the DOM tree after 5 seconds (lines 10-15). Similarly, when the “Detach paragraph” button is clicked, we detach the p element using the detach() method, and then attach it back to the DOM tree after 5 seconds (lines 17-23).

Run the code below. In the web page output, click on both span and p elements. You will observe alert boxes generated for both clicks. Now, click on both the “Remove span” and “Detach p” buttons. When both elements are reattached, click on the p and span elements again. Notice that the click event handler of the span element that was deleted with remove() is no longer functional. In contrast, the click event handler associated with the detached p element is retained and functional.

empty() method

Given a selector, the empty() method removes all the inner HTML from the set of matched elements. The element itself is not deleted; the HTML contained within it is emptied.

In the web page below, we empty the div element and consequently remove the p element nested within. In lines 2-4 of jQuery, we assign a click event handler to the button element with text “Empty div.” In line 3 of the event handler function, we empty the div element using the empty() method.

Run the code below. In the web page output, click on the button element with text “Empty div.” Observe that the p element nested within div disappears along with all the textual content of div. However, the div element border remains, showing that the div element itself still exists.