Develop Reference

Deleting completely a html element

I am aware of .remove() , I am using it and its working fine, I mean its removing the element which I want. But I think it doesn't removes it permanently. On right clicking in browser window selecting View page source I am still able to see those removed elements.
I want to remove them completely or say permanently.
Please help.

.remove() removes them completely. The reason you still seem then in the view page source is because the page source does not change based on javascript. The page source shows how the page originally looked when it was first loaded, not how it currently is.
If you look in the developers console, you will see that they are no longer there.
Likewise, if you dynamically add a new element with javascript/jquery, it will not show that element in the page source.

Page Source and DOM are two different different things, whenever you edit the elements or remove them it get removes from DOM and not from page source. That means The javascript manipulate the DOM not the source which come from the server.
DOM: The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents.
The view source always shows the content came from the server initially without any modification. Use DEVELOPER CONSOLE in browsers to see the live DOM manipulation.
Note: Press F12 to enable console on major browser

view source render the code within the page that you have written(static)
for dynamic changes/view inspect the elements tab in developer tools.

View page source shows the content of the original HTML file, as returned by the HTTP server. The DOM can be altered with javascript, but the source will not change.

You Cannot permenantly remove the dom elements using jquery or javascript. .remove() is totally different from your logic. just it removes temporary hide from the dom elements suppose you refresh the page it comes again it is jquery magic.

Firefox Addon to manipulate DOM without giving the website access to the changes

I write a Mozilla Firefox Addon, that lets me comment websites: When I open a website and click somewhere, the plugin creates a <div> box at this location, where I can enter a comment text. Later, when I open the website again, the plugin automatically puts my previously created comment boxes at the places they where before. (Similar to a comment feature in many PDF readers, etc.)
This leads to a security problem: A website could use an event listener to listen to the creation of new <div> elements and read their content, allowing it to read my private comments.
How can I solve this security issue? Basically, I want a Firefox addon to put private content in a website, while the website should not be able to access this content via JavaScript. (Unless I want it to.)
I could listen to listeners and detach them as soon as the website attaches them - but that does sound like a solid solution.
Is there a security concept in order to make my addon the authority over DOM changes, respectively, to control the access to certain elements?
Alternatively, would it be possible to implement some sort of overlay, which would not be an actual part of the websites DOM but only accessible by the addon?
Similar security problems should occur with other addons. How do they solve it?

If you inject the DOM in a document, the document will always be able to manipulate it, you can't really do much about it. You can either:
1) Don't inject your comment directly in the document, but just a placeholder were there is the first words of the comment, or an image version of the comment (you can generate that with canvas), leave the full ones in your JavaScript Add-on scope, that is not accessible from the page: when you click to edit or add, you can open a panel instead and do the editing there.
2) Inject an iframe, if you have your page remotely in another domain shouldn't be a problem at all, the parent's document can't access to the iframe; but also viceversa: you need to attach content script to your iframe in order to talk with your add-on code, and then you can use your add-on code to send and receive messages from both iframe and parent's document.
If you use a local resource:// document, I'm afraid you need a terrible workaround instead, and you need to use sandbox policies to avoid that the parent's document can communicate with the iframe itself. See my reply here: Firefox Addon SDK: Loading addon file into iframe
3) Use CSS: you can apply a CSS to a document via contentStyle and contentStyleFile in page-mods. The CSS attached in this way can't be inspected by the document itself, and you could use content to add your text to the page, without actually adding DOM that can be inspected. So, your style for instance could be:
span#comment-12::after{
content: 'Hello World';
}
Where the DOM you add could be:
<div><span id='comment-12'></span></div>
If the page tries to inspect the content of the span, it will get an empty text node; and because from the page itself the stylesheet added in this way cannot be inspected, they cannot the styles rules to get the text.
Not sure if there are alternatives, those are the solutions that pop to my mind.

Add-ons that do similar things implement some combination of a whitelist / blacklist feature where the add-on user either specifies which sites they want the action to happen on, or a range of sites they don't want it to happen on. As an add-on author, you would create this and perhaps provide a sensible default configuration. Adblock Plus does something similar.

Create an iframe and bind all your events to the new DOM. By giving it a different domain to the website, you will prevent them from listening in to events and changes.

Addons can use use the anonymous content API used by the devtools to create its node highlighter overlays.
Although the operations supported on anonymous content are fairly limited, so it may or may not be sufficient for your use-case.

VKontakte click by element

I want click by some element in VKontakte web application from JS, but it not possible.
For example I go to this application http://vk.com/app2797985. I want click by element with id: likeBlock_button_like.
Standart JS code for clicking by element:
javascript:document.getElementById('likeBlock_button_like').click();
but this code dont work with this application. How to solve this problem?

The reason you cannot access the element is because it is inside an iframe. Since the iframe is from different domain, you cannot access dom elements through javascript due to Same origin policy

How do I dynamically add a div element to any page from a Firefox extension/Addon

I am writing an extension for firefox which will be used to annotate pages on the web via a service. I would like to have a div or an overlay element (probably XUL based) at the bottom of the page which will let people annotate a page and save it. Something like what the Google Friend Connect does on this page, but via an addon.
This floating div/overlay should show up for every page on FF and should render contents from a web service. How do I start building this out?
If it is possible to access DOM via a FF plugin and alter it, then I would like to be able to add a floating div to the body of the document. But that doesn't work either. Example posted here: Dynamically adding a floating div to a page

There are several things you have to do:
You probably want to add some custom CSS to style the div. You can use the stylesheet service.
You have to attach an event handler to the load event ( or DOMContentLoaded), to be notified when a page finished loading. Have a look at Intercepting Page Loads and On page load.
You need a reference to element you want the new element append to. Tabbed Browser provides some useful information. E.g. you can get a reference to the body of the current selected tab gBrowser.contentDocument.body.
Regarding your code example: You forgot the give the element the CSS property position: absolute; or position: fixed; (you have a typo in your code, you wrote postion), depending on whether it should appear at the bottom of the page or the screen.

You can do this (because I have). To do it you'll need to find the node you want to change the content of (if you're adding to the bottom of the page, you may want to use the <body> node I guess) and then call one of:
insertBefore(theNewNode, afterThisNode);
insertAfter(theNewNode, thisNode);
Or possibly, but I'm not sure:
anExistingNode.innerHTML = anExistingNode.innerHTML + myNewContent;
That should be enough to get you started.

How do I get the current iframe location from within the iframe?

I've seen solutions like
top.document.getElementById('iframe_a').src
But the problem is, that I don't know the Iframes ID. My Application is running as a Gmail-Gadget and therefore I don't know which ID Google will generate.
So how can I get the URL of my gadget?
Using JQuery will also be fine.

If your script is executed within an iframe, location.href should do it. You might want to access the location object in more detail tho.