如何使用 Jquery/JavaScript 完全删除画布元素？

Question

我有一个从 jQuery 插件动态加载到我的页面上的画布对象。 它没有包装器，没有与之关联的 id 或类。 但我需要在之后删除它

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

发生。 我试过使用 jQuery 的

...next().remove(); 

技术，以便相邻的 div 元素可以将其从 DOM 中删除，但我遇到了问题。 具体来说，我页面上的其他元素也被删除了。 有没有一种健康的方法来解决这个问题？

谢谢！

Answer 1

如果您没有使用多个画布元素，只需

$('canvas').remove();

将删除页面上所有匹配的元素。 http://jsfiddle.net/vj6NP/

如果页面上确实有多个画布并且只想删除一个，则可以使用nth-of-type选择要删除的一个。

例如删除第一个实例http://jsfiddle.net/vj6NP/3/ ： -

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

Answer 2

页面上有多少个画布元素？ 如果只有一个； 并且您不打算在将来添加任何内容，这可能是最简单的做法

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

Answer 3

最简单的方法是保留对添加到文档的画布元素的引用，然后使用 JQuery 将其删除：

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