How to completely remove the canvas element with Jquery/JavaScript?

Question

I have a canvas object that loads on my page dynamically from a jQuery plugin. It has no wrapper, no id or class associated to it. But I need to remove it after

$(window).resize(function)() {...} 

takes place. I have tried using jQuery's

...next().remove(); 

technique, so that the neighboring div element can remove it from the DOM, but I am getting issues. specifically, additional elements on my page are also getting removed. Is there a healthy way to about this?

Thanks!

Solution 1

If you are not using multiple canvas elements, simply

$('canvas').remove();

Will remove all matched elements on the page. http://jsfiddle.net/vj6NP/

If you do have multiple canvas on the page and would like to remove only one, you could select which one to remove using nth-of-type.

For example to remove the first instance http://jsfiddle.net/vj6NP/3/: -

$('canvas:nth-of-type(1)').remove();

Solution 2

How many canvas elements do you have on the page? If there is only one; and you don't plan to ever add any in the future it might be simplest just to do

var dynamic_canvas = $('canvas');
if(dynamic_canvas) dynamic_canvas.remove();

Comments

[T.J. Crowder]

"...but I am getting issues" What issues? What makes you think it isn't working? What error(s) are you getting in the JavaScript console? (Or if you aren't, that's important information.) Can you quote a bit more of your code? It's impossible to help with the code you've quoted, not least because we have no idea what jQuery set the ...next().remove() is being called on.

[klewis]

When I used next().remove(), the canvas AND a wrapper around a parent div tag was getting removed at the same time...but that was due to something I overlooked in my code. It's an honor by the way to have you ask a question about my issue. The issue is resolved.

[Philo]

what if I wanted to delete in and then with some event (say a mouse click) bring it back. As far as my understanding .remove() completely removes it and there is no bringing it back?

[KryptoniteDove]

SOunds as if that should be a question in it's own right. If you are wanting to do that is it not enough to hide the element on the page then show it when you require it again?

[Beetroot-Beetroot]

Does the DOM element really have a .remove() method?

[Dogoferis]

By itself? No. But since we're referencing it using jQuery the returned jQuery object does have a remove method.

[Beetroot-Beetroot]

But Dogoferis, $('canvas')[0] is the same as $('canvas').get(0), returning the DOM element not a jQuery object.

[Dogoferis]

Point to you, edited response to be correct (actually edited it in March - forgot to note that I had edited)

[Fanky]

I originally used canvas.remove() (using the variable from canvas = document.createElement('canvas');), but this doesn't work on IE 11. $('canvas').remove(); is the right solution.