RENOTES

В сети довольно много статей по этой теме, но нигде нет 100% рабочего скрипта, к примеру, если он и работает на добавление элементов, то в нем нет ограничения на вставку элементов, а это довольно часто необходимо скажем при динамическом добавлении полей для прикрепления файлов к сообщению. Другая часть подобных скриптов не поддерживает всеми любимый Internet Explorer, в общем, я решил написать свой скрипт, в нем реализована поддержка всех браузеров, а также есть ограничение на добавление элементов.

Начнем с HTML структуры:

<div id="blockFile">
	<input class="file" type="file" name=""/>
	<a href="javascript://" onclick="addItem (this)" id="add">+</a>
</div>

Функция добавления элемента:

index – счетчик элементов с классом filen,

maxItem – максимальное количество добавляемых элементов, при значении 0 ограничение будет отключено.

function addItem() {
    maxItem = 10;
    index = $("#blockFile .file").length
    /*
     *Если index превышает допустимое количество элементов то скрываем кнопку *добавления элемента иначе добавляем элемент
     */
    if (maxItem != 0 && index >= maxItem) {
        $('#add').css({
            'display': 'none'
        })
    } else {
        $('#blockFile').append('\
// Тут html добавляемого элемента
<div class="container" >\
<input class="file" type="file" name=""/>\
<a href="javascript:\/\/" onclick="deleteItem(this)">х</a>\
</div>\
');
    }
}

Функция удаления элемента:

function deleteItem(element) {
    // Удаляем элемент
    $(element).parent().remove()
    // Если кнопка добавления элемента скрыта, то показываем ее.
    if ($('#adder:hidden')) {
        $('#add').css({
            'display': 'inline-block'
        })
    }
}