Suppose the jQuery object is $target.
Asked
Active
Viewed 1.7e+01k times
4 Answers
201
Is $target.remove(); what you're looking for?
-
80Of course this only removes it from the visible document. If there are other references to the node from JavaScript, such as the $target variable itself, the object will escape the garbage collector for now. If you want to DESTROY it you also have to lose all references to it. I'm not quite sure why you'd want to DESTROY a DOM element though. Maybe you just hate $target. Poor $target, what did it ever do to you? – bobince Sep 08 '09 at 11:01
-
56$target is kind when he's alone, but he gets nasty when he is around his 100.000 cloned friends. – Sebastián Grignoli Jun 21 '11 at 22:06
-
2Will `.empty()` have a similar effect? – Saurabh Nanda Oct 30 '12 at 19:35
-
3@SaurabhNanda - Empty will remove the contents of the object, but doesn't remove (or destroy) the object itself. – Luke Oct 17 '13 at 15:24
47
If you want to completely destroy the target, you have a couple of options. First you can remove the object from the DOM as described above...
console.log($target); // jQuery object
$target.remove(); // remove target from the DOM
console.log($target); // $target still exists
Option 1 - Then replace target with an empty jQuery object (jQuery 1.4+)
$target = $();
console.log($target); // empty jQuery object
Option 2 - Or delete the property entirely (will cause an error if you reference it elsewhere)
delete $target;
console.log($target); // error: $target is not defined
More reading: info about empty jQuery object, and info about delete
-
3Why `delete $target` will not work: http://perfectionkills.com/understanding-delete/#misconceptions Why won't `$target=null` work? – Lee Goddard Oct 16 '13 at 14:43
-
@LeeGee - Can you please summarize your post to explain why delete won't work for jQuery objects? Why does it appear to work when we look at console.log($target) at the end? Thank you. – Luke Oct 17 '13 at 15:22
-
I cannot explain it any better than the article cited, which I found very detailed. – Lee Goddard Oct 21 '13 at 07:48
-
For the record, this works in console because console evaluates JS in the scope of eval, which allows delete. Variables in "natural" scopes will not be deletable. Use `$target=null` instead. It is faster and doesn't mess with internal browser optimizations. – bendman May 09 '14 at 10:55
-
@bendman - Do you have any sources that talk about natural scopes not being deletable, or using null instead? If there's a good source to reference, I'll add this as another option in the answer. – Luke May 13 '14 at 18:42
-
@Luke Actually, that link above has it, albeit at a different anchor: http://perfectionkills.com/understanding-delete/#firebug_confusion – bendman Jul 17 '14 at 09:55
-
For what it's worth, `delete` does appear to do exactly what `remove()` didn't for me; with `'remove()`, references to the objects seemed to be retained and were still causing lagging issues with other on-screen elements even after being `remove()`d (these were very large background images with animated SVGs). Using `delete` appears to have *actually* destroyed them as I was hoping, and cleared up the subsequent lag. I get it may be inappropriate for some uses, but it works exactly as expected with jQuery DOM element references. – indextwo Aug 13 '14 at 16:25
-
1Delete is fine. It just means that block won't be optimized by the JS engine. In most cases, that is entirely irrelevant. When it becomes an issue, then you look for ways around using delete. Not before. – Charlie Martin Feb 13 '15 at 23:01
16
You are looking for the .remove() function.
0
Not sure if it's just me, but using .remove() doesn't seem to work if you are selecting by an id.
Ex: $("#my-element").remove();
I had to use the element's class instead, or nothing happened.
Ex: $(".my-element").remove();
Richard
- 1,912
- 20
- 28