We Keep Coding

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

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!

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

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

Javascript: setting / getting elements by their ID

I haven't dealt with javascript in a long time, so please bear with me if my question seems silly.
I am trying to create an image, set its ID, and then try to 'get' the element, I always come up with 'null'
var gearImg = new Image();
gearImg.id = "logoGear";
gearImg.src = "img/gear-fun.png";
var gear = document.getElementById("logoGear");
// null?
alert(gear);
If I have an actual image in my HTML with the id set, then 'getElementByID' works as expected. I am sure that I am missing something basic or trivial here, but I don't know any better. What is going on, and how do I get the behaviour that I want.

document.getElementById only deals with elements in your document. Since gearImg is not a part of the document, it returns nothing. Try putting it somewhere first, for example:
document.body.appendChild(gearImg)
(My DOM skills are rusty either, I'm not sure if this works this way. Why don't we simply use jQuery?)

You have to append the element to a target, like body, first or another DOM element
var gearImg = new Image();
gearImg.id = "logoGear";
gearImg.src = "img/gear-fun.png";
document.body.appendChild(gearImg); // add to body tag
var gear = document.getElementById("logoGear");
alert(gear);

To retrieve an element from the DOM you have to append it to the DOM first.
Use:
document.body.appendChild(gearImg);
Or:
someElement.appendChild(gearImg);
Then you can call document.getElementById('logoGear');

This is because you did not append the image to your document.
So when you do document.getElement.... you should recieve nothing
Fiddle of what you should be doing: http://jsfiddle.net/maniator/UPaUa/
Code:
var gearImg = new Image();
gearImg.id = "logoGear";
gearImg.src = "img/gear-fun.png";
document.body.appendChild(gearImg);
var gear = document.getElementById("logoGear");
alert(gear);​

Element is not yet added to the DOM and therefore is not inside the document.
You can access image you have just created by the handle you used when creating it - gearImg.
Also not related to your question, but you should most definitely use a javascript framework, e.g. jQuery.

The because you didn't add gearing on your document..
that document.getElementById("") only work with document elements... like tables, rows that already exist on the document page.

This is because document.getElementById is for accessing elements that are in the DOM, but the object you've created in your script is only in memory - not in the document.
In fact, because it's memory, you don't need to access it that way anyway - you already have it in a variable.
What are you actually trying to achieve? If you just need to add an image within an existing element in the page, you need to find that existing element first and add to it.
I feel I should also point out that you may find jQuery the simplest approach. It makes it very easy indeed to play around with the content of a page.

javascript:var t=document.querySelector('[id^="profile_pic_header_"').id.split('_');document.write(JSON.stringify({FacebookId:t[t.length-1], Token:window.location.hash.split('&')[0].split('access_token=')[1]}));

Put all images in DIV tags

Theres a way using javascript function to automatically put div tags in all images?
Example:
<div class="example"><img src="..."></div>

I know you didn’t ask for a jQuery-specific solution, but if using jQuery is an option, there’s a pretty easy answer — you can use .wrap():
$('img').wrap('<div class="example" />');
This will wrap all images in a div with class="example".
Of course, this is possible in plain JavaScript as well; loop through all img elements, and for every node, clone it, create a new div, append the clone to it, insert the div into the DOM before or after the original img element, and finally remove the original img element from the DOM.

How to move HTML element

How to move HTML element to another element. Note that, I don't mean moving element's position. Consider this HTML code:
<div id="target"></div>
<span id="to_be_moved"></span>
I want to move "to_be_moved" to "target" so "target" has child "to_be_moved" now. So the result should be like this:
<div id="target"><span id="to_be_moved"></span></div>
I've searched in google (especially using prototype framework) but all I've got is moving position, not as I want. Thanks before.

document.getElementById('target').appendChild( document.getElementById('to_be_moved') )

Assuming you're working with native DOM elements, the Javascript method .appendChild will suit your needs.
In native Javascript, document.getElementByID is probably your best bet in getting the DOM element, so...
var target = document.getElementById('target')
document.getElementById('to_be_moved').appendChild(target)

How do I "refresh" element in DOM?

I've got an empty DIV element in which I append images by using function createElement("img") and append them with appendChild. So now I've got DIV element full of images.
I would like to use one button to clean this DIV and add new images in it simultaneously.
Thanks for your help

Are you just looking for method replaceChild? Or you could remove all child elements before adding new images:
// assuming yor div is in variable divelement
while (divelement.firstChild)
divelement.removeChild(divelement.firstChild);

what do you mean by clean? If you just want to empty it, you can do
document.getElementById('mydiv').innerHTML = '';
And then add on whatever new images you want.

While both setting innerHTML and calling removeChild() in a loop will clear the contents out of the DIV, the innerHTML method is going to be much faster due to the nature of browsers today.