.remove[ [selector ] ]Returns: jQuery
Description: Remove the set of matched elements from the DOM.
version added: 1.0.remove[ [selector ] ]
- selectorType: StringA selector expression that filters the set of matched elements to be removed.
Similar to .empty[], the .remove[] method takes elements out of the DOM. Use .remove[] when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach[] instead.
Consider the following HTML:
1 2 3 4 | Hello Goodbye |
We can target any element for removal:
1 | $[ ".hello" ].remove[]; |
This will result in a DOM structure with the
1 2 3 | Goodbye |
If we had any number of nested elements inside
We can also include a selector as an optional parameter. For example, we could rewrite the previous DOM removal code as follows:
1 | $[ "div" ].remove[ ".hello" ]; |
This would result in the same DOM structure:
1 2 3 | Goodbye |
Examples:
Removes all paragraphs from the DOM
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | remove demo p { background: yellow; margin: 6px 0; } Hello how are you? Call remove[] on paragraphs $[ "button" ].click[function[] { $[ "p" ].remove[]; }]; |
Demo:
Removes all paragraphs that contain "Hello" from the DOM. Analogous to doing $["p"].filter[":contains['Hello']"].remove[].
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | remove demo p { background: yellow; margin: 6px 0; } Hello how are you? Call remove[ ":contains['Hello']" ] on paragraphs $[ "button" ].click[function[] { $[ "p" ].remove[ ":contains['Hello']" ]; }]; |