Suppression d'un élément de la page Web via l'extension firefox

Question

Je vais développer une extension firefox qui ajoute un bouton à côté des champs d'entrée de fichier (la balise <input type="file">) lorsqu'un fichier est sélectionné.

Le fichier overlay.js, qui contient la logique de l'extension, gère l'événement « fichier choisir » par cette méthode:

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

Mon problème est que, chaque fois que je choisir un fichier, un nouveau bouton est d'être ajouté, voir cette image:

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

Si je sélectionne le même fichier plus d'une fois, aucun nouveau bouton apparaît (ce qui est correct).

Comme nous pouvons le voir, sur la première entrée de fichier, un seul fichier a été sélectionné.

Sur le second, j'ai choisi deux fichiers différents, en effet deux boutons ont été créés ...

Le troisième, j'ai choisi trois fichiers différents.

Le comportement correct devrait être le suivant:

• lorsqu'un fichier est choisi, créer my_button à côté du champ d'entrée
• si my_button existe, supprimer et en créer un autre (je besoin cela, beacuse Je devrais le connecter à un événement personnalisé qui fera quelque chose avec le nom du fichier)

Ma question est: comment puis-je supprimer correctement le bouton? Notez que le code my_button html n'apparaît pas sur la source de la page!

Merci

Answer 1

Résolu. Je mets une carte d'identité pour chacun avec la méthode suivante:

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

J'appelle cette méthode uniquement à la page charge:

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

J'ai modifié la méthode onFileChosen de cette façon:

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

Pardonnez-moi si je pense trop simplement, mais ne pourrais pas vous le faire? Ce

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

Est-ce ce que vous cherchez? N'hésitez pas à me corriger si je vous ai mal compris.