Remove unused File Upload Javascript

Hi everybody,

I have this File Upload control, whereby the user is granted a limit of 5 uploads. And so, the user clicks on “Attach Another File”, and decides to attach a file ONLY in the first File Upload control. My problem is, I want the user to be able to click on an “X” beside every File Upload control, so that it will close those unnecessary (or unused) FIle Upload controls. How do I edit my code in JAVASCRIPT?

Please advise.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <script language="javascript" type="text/javascript">
        var fileCount = 1;
        function addOneFile()
        {
            ++fileCount;
            var div = document.getElementById("showFile"+fileCount);
            if ( div != null ) div.style.display = "block";
        }
        </script>
       <style type ="text/css">
       .style37
        {
	        color: Black;
	        margin-left: 99px;
        }
       </style>
    </head>
<body>
                    <table cellpadding="5">
                        <tr>
                            <td style="vertical-align: top">
                                Attachment:
                            </td>
                            <td>
                                <input type="file" name="attachment" id="attachment" style="width:230px" />
                                <div id="showFile2" style="display: none;">
                                    <input name="file2" type="file" />
                                </div>
                                <div id="showFile3" style="display: none;">
                                    <input name="file3" type="file" />
                                </div>
                                <div id="showFile4" style="display: none;">
                                    <input name="file4" type="file" />
                                </div>
                                <div id="showFile5" style="display: none;">
                                    <input name="file5" type="file" />
                                </div>
                                <br />
                                <a href="javascript:addOneFile();" class="style37">Attach another File</a>
                                <br />
                                                              
                                (Restricted to 5 uploads)
                            </td>
                        </tr>
                    </table>
</body>
</html>

Place the close link/image/button with a class of “closefile” on each of them.

Then load the script from just before the </body> tag.


<body>
...
<script type="text/javascript" src="js/script.js"></script>
</body>

The script itself gets those elements with the class name of “closefile” using the getElementsByClassName method, and attaches a close event on to them. This works on all modern web browsers.

To support other web browsers, such as Internet Explorer, you will want to help them know how to getElementsByClassName


if (!document.getElementsByClassName) {
    document.getElementsByClassName = function (className) {
        getElementsByClassName(this, className);
    };
}
function getElementsByClassName(el, className) {
    // your favourite getElementsByClassName here
}

There are many different types of getElementsByClassName functions available for when less modern web browsers don’t know how to do it, so a quick google search will give you a wide range of them to pick and choose from.

Getting back to the task at hand, we’ll get the page elements with a class name of “closefile” and attach an onclick event to them.


var closefiles = document.getElementsByClassName('closefile'),
    i;
for (i = 0; i < closefiles.length; i += 1) {
    closefiles[i].onclick = closefile;
}

The closefile function will walk up the DOM tree looking for the DIV element that you have it contained in. When it finds it, that div is removed.

As a “just in case” safety measure, the code will stop looking if it manages to get up to the BODY element.


function closefile() {
    var el = this;
    while (el.nodeName !== 'DIV' && el.nodeName !== 'BODY') {
        el = el.parentNode;
    }
    if (el.nodeName === 'BODY') {
        return;
    }
    el.parentNode.removeChild(el);
}