Removendo elemento da página web através da extensão firefox

Question

Eu estou indo para desenvolver uma extensão do Firefox que adiciona um botão ao lado dos campos de entrada de arquivo (o tag <input type="file">) quando um arquivo é selecionado.

Os overlay.js arquivo, que contém a lógica da extensão, gere o "arquivo escolher" evento através deste método:

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

Meu problema é que, toda vez que eu escolher um arquivo, um novo botão está sendo adicionado, ver esta imagem:

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

Se eu selecionar o mesmo arquivo mais de uma vez, há novo aparece botão (isto é correto).

Como podemos ver, no primeiro arquivo de entrada, apenas um arquivo foi selecionado.

Na segunda eu escolhi dois arquivos diferentes, com efeito dois botões foram criados ...

No terceiro, eu escolhi três arquivos diferentes.

O comportamento correto deve ser esta:

• quando um arquivo é escolhido, criar meu_botao ao lado do campo de entrada
• se meu_botao existe, excluí-lo e criar outro (I necessidade isso, beacuse I deve ligá-lo a um evento personalizado que vai fazer alguma coisa com o nome do arquivo)

A minha pergunta é: como posso excluir corretamente o botão? Note que o código html meu_botao não aparece no código fonte da página!

Graças

Answer 1

resolvido. Eu definir uma identificação para cada um com o seguinte método:

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

Eu chamo este método só no carregamento da página:

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

Então eu tenha modificado o método onFileChosen desta forma:

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++;
    }
}

Answer 2

Pardon me se eu estou pensando muito simplesmente, mas você não pode apenas fazer isso?

var button = document.getElementById('Firefox.Now_button_id')
button.parentNode.removeChild(button)

É isso que você estava procurando? Sinta-se livre para me corrigir se eu não entendi você.