Removing element from web page through firefox extension

Question

I'm going to develop a firefox extension which adds a button beside the file input fields (the <input type="file"> tag) when a file is selected.

The file overlay.js, which contains the extension's logic, manages the "file choose" event through this method:

var xpitest = {
    ...
    onFileChosen: function(e) {
        var fileInput = e.explicitOriginalTarget;
        if(fileInput.type=="file"){
            var parentDiv = fileInput.parentNode;
            var newButton = top.window.content.document.createElement("input");
            newButton.setAttribute("type", "button");
            newButton.setAttribute("id", "Firefox.Now_button_id");
            newButton.setAttribute("value", "my button");
            newButton.setAttribute("name", "Firefox.Now_button_name");
            parentDiv.insertBefore(newButton, fileInput);
        }
    }
    ...
}

window.addEventListener("change", function(e) {xpitest.onFileChosen(e)},false);

My problem is that, everytime I choose a file, a new button is being added, see this picture:

http://img11.imageshack.us/img11/5844/sshotn.png

If I select the same file more than once, no new button appears (this is correct).

As we can see, on the first file input, only one file has been selected.

On the second one I've chosen two different files, in effect two buttons have been created...

On the third, I've chosen three different files.

The correct behavior should be this:

• when a file is chosen, create my_button beside the input field
• if my_button exists, delete it and create another one (I need this, beacuse I should connect it to a custom event which will do something with the file name)

My question is: how can I correctly delete the button? Note that the my_button html code does not appear on page source!

Thanks

Answer 1

Solved. I set an ID for each with the following method:

onPageLoad: function(e){
    var inputNodes = top.window.content.document.getElementsByTagName("input");       
    for(var i=0; i<inputNodes.length; i++){
    if(inputNodes[i].type=="file")
         inputNodes[i].setAttribute("id",i.toString());
    } 
}

I call this method only on page load:

var appcontent = document.getElementById("appcontent");   // browser
if(appcontent)
    appcontent.addEventListener("DOMContentLoaded", xpitest.onPageLoad, true);

Then I've modified the onFileChosen method in this way:

onFileChosen: function(e) {
    var fileInput = e.explicitOriginalTarget;
    if(fileInput.type=="file"){
        var parentDiv = fileInput.parentNode;         
        var buttonId = fileInput.id + "Firefox.Now_button_id";
        var oldButton = top.window.content.document.getElementById(buttonId);
        if(oldButton!=null){
            parentDiv.removeChild(oldButton);
            this.count--;
        }
        var newButton = top.window.content.document.createElement("input");
        newButton.setAttribute("type", "button");      
        newButton.setAttribute("id", buttonId);
        newButton.setAttribute("value", "my button");
        newButton.setAttribute("name", "Firefox.Now_button_name");
        parentDiv.insertBefore(newButton, fileInput);
        this.count++;
    }
}