通过Firefox扩展从网页中删除元素答案

【问题标题】：Removing element from web page through firefox extension通过Firefox扩展从网页中删除元素
【发布时间】：2009-05-11 08:49:07
【问题描述】：

我将开发一个firefox扩展名，该扩展名在选择文件时添加文件输入字段（ <input type="file"> tag）旁边。

文件overlay.js，包含扩展的逻辑，通过这个方法管理“文件选择”事件：

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

我的问题是，每次我选择一个文件时，都会添加一个新按钮，请看这张图：

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

如果我多次选择同一个文件，则不会出现新按钮（这是正确的）。

我们可以看到，在第一个文件输入时，只选择了一个文件。

在第二个中，我选择了两个不同的文件，实际上已经创建了两个按钮...

第三个，我选择了三个不同的文件。

正确的行为应该是这样的：

选择文件后，在输入字段旁边创建 my_button
如果 my_button 存在，请将其删除并创建另一个（我需要这个，因为我应该将它连接到一个自定义事件，该事件将对文件名执行某些操作）

我的问题是：如何正确删除按钮？请注意，my_button html 代码不会出现在页面源代码中！

谢谢

【问题讨论】：

标签： javascript html firefox xpi

【解决方案1】：

如果我想得太简单了，请原谅我，但你不能这样做吗？

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

这就是你要找的吗？如果我误解了你，请随时纠正我。

【讨论】：

这种方式可能会删除所有按钮，我只需要删除与输入字段关联的按钮...我已经尝试过： var oldButton = document.getElementById("Firefox.Now_button_id"); if(oldButton!=null){ parentDiv.removeChild(oldButton);我想我应该使用 ID，但我无法让它工作......
如何删除所有按钮？您应该只有一个具有该 ID 的按钮。
当然！但这不会删除任何按钮，我认为是因为 my_button 的 html 代码没有出现在页面源代码中！

【解决方案2】：

解决了。我使用以下方法为每个设置了一个 ID：

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

我只在页面加载时调用此方法：

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

然后我就这样修改了onFileChosen方法：

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

【讨论】：