Edit 2: Upon preview request
<html>
<style>
div#maisfoto {
text-align: center;
color: white;
float: right;
width: 43px;
height: 21px;
border-radius: 20px;
background-color: brown;
vertical-align: middle;
display: table;
padding-bottom: 3px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css.map"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script><body><divid="maisfoto">Mais</div>
<div class="fileinput fileinput-new aquiClonar" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$('#maisfoto').on('click', function () {
$( ".aquiClonar:first" ).clone().appendTo( "body" );
$('.aquiClonar a').click(function(){
console.log('remover()');
$(this).parents('.aquiClonar').remove();
});
});
});
</script>
</html>
Code Comments
$(document).ready(function () { // quando terminar de carregar a pagina
$('#maisfoto').on('click', function () { // ao clicar na div id maisfoto
$( ".aquiClonar:first" ).clone().appendTo( "body" ); // procura a class aquiClonar e pega o primeiro (first) e add na tag body
$('.aquiClonar a').click(function(){ // ao clicar em uma tag a que contenha class aquiClonar faz o evento click
console.log('remover()'); // log para debug
$(this).parents('.aquiClonar').remove(); // this se referencia ao selector a que por sua vez chama a classe superior aquiClonar e seleciona, após isso ele remove a tag e tudo que conter nela
});
});
});
Edit 3: On request not to remove the first element:
$(document).ready(function () { // quando terminar de carregar a pagina
$('#maisfoto').on('click', function () { // ao clicar na div id maisfoto
var clone = $('.aquiClonar:first').clone(); // clonar
clone.append("<a href='#' class='btn btn-default fileinput-exists' data-dismiss='fileinput'>Remove</a>"); // Adicionar o remove somente nos clones
$( "body" ).append(clone); // procura a class aquiClonar e pega o primeiro (first) e add na tag body
$('.aquiClonar a').click(function(){ // ao clicar em uma tag a que contenha class aquiClonar faz o evento click
console.log('remover()'); // log para debug
$(this).parents('.aquiClonar').remove(); // this se referencia ao selector a que por sua vez chama a classe superior aquiClonar e seleciona, após isso ele remove a tag e tudo que conter nela
});
});
});
