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!

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!

• javascript
• jquery
• html5-canvas

• 1 "...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. – T.J. Crowder Commented Mar 24, 2013 at 12:22
• 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. – klewis Commented Mar 24, 2013 at 12:32

3 Answers 3

If you are not using multiple canvas elements, simply

$('canvas').remove();

Will remove all matched elements on the page. http://jsfiddle/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/vj6NP/3/: -

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

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();

The easiest way is to keep a reference to the canvas element added to the document then remove it using JQuery:

this.canvas = document.createElement('canvas');
//later...
$(this.canvas).remove();