Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="form__line form__line--block">
                    <div class="form__line form__line--input">
                        <input class="form__input form__input--file" name="attach" type="file" id="attach-field">
                        <a href="#" class="form__input-del">Удалить</a>
                        <a href="#" class="form__input-add">Добавить еще</a>
                    </div>
                </div>
</body>
</html>
 
// Добавление/удаление полей загрузки файлов
$('.form__input-add').on('click', function(){
​
        $('<div class="frm__lne form__line--input"><input class="form__input form__input--file" name="attach" type="file" id="attach-field"><a href="#" class="form__input-del">Удалить</a><a href="#" class="form__input-add">Добавить еще</a>').insertAfter('.form__line--input:last');
        $('input[type=file].form__input--file').each(function(){
            $(this).styler();
        });
        $('.form__input-add').each(function(i, item){
            if($('.form__input-add').length > 1){
                $(item).remove();
            }
        });
        return false;        
    });
​
    $('.form__input-del').on('click', function () {
        if ($('.form__line--input').length == 1) {
            return false
        }
        $(this).parents('.form__line--input').remove();
        if(!$('.form__input-add').length){
            $('<a href="#" class="form__input-add">Добавить еще</a>').insertAfter('.form__input-del:last');
        }
​
        return false;
    });
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers