Rimozione di elementi dalla pagina web attraverso l'estensione firefox

Question

ho intenzione di sviluppare un'estensione per Firefox che aggiunge un pulsante accanto i campi di input di file (il <input type="file"> tag) Quando si seleziona un file.

I overlay.js file, che contiene la logica della estensione, gestisce l'evento "Scegli file" attraverso questo metodo:

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

Il mio problema è che, ogni volta che scegliere un file, viene aggiunto un nuovo pulsante, vedere questa foto:

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

Se si seleziona lo stesso file più di una volta, nessun nuovo pulsante appare (questo è corretto).

Come si può vedere, il primo file di input, è stato selezionato un solo file.

Al secondo quella che ho scelto due file diversi, a tutti gli effetti sono stati creati due tasti ...

Il terzo, ho scelto tre file differenti.

Il comportamento corretto dovrebbe essere questo:

• quando si sceglie un file, creare my_button accanto al campo di immissione
• se esiste my_button, eliminarlo e crearne un altro (I necessità questo, Allucinante dovrei collegarlo a un evento personalizzato che fare qualcosa con il nome del file)

La mia domanda è: come posso correttamente eliminare il pulsante? Si noti che il codice html my_button non compare sulla sorgente della pagina!

Grazie

Answer 1

risolto. Ho impostato un ID per ciascuna con il seguente metodo:

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

Io chiamo questo metodo solo al caricamento della pagina:

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

Poi ho modificato il metodo onFileChosen in questo modo:

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 sto pensando troppo semplice, ma non hai potuto fare questo?

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

E 'questo quello che cercavi? Sentitevi liberi di correggermi se ho capito male.