Method . jQuery clone()

Question

Method . jQuery clone()

Asked 8 years, 12 months ago

Viewed 576 times

1

I need it every time I click the div Mais, clone the full content of it and put it right below. However it’s not working, could you tell me what I’m missing ?

$(document).ready(function () {
  $('#maisfoto').on('click', function () {
    $( ".fileinput fileinput-new" ).clone().appendTo( ".fileinput fileinput-new" );
  });
});

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

<div id="maisfoto">Mais</div>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div id="tamb" class="fileinput-preview fileinput-exists thumbnail" style="padding-bottom: 15px;">Tamanho esperado: 586px x 184px</div>
    <div>
        <span class="btn btn-default btn-file"><span class="fileinput-new">Selecionar Imagens</span><span class="fileinput-exists">Trocar</span><input type="file" name="..."></span>
        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remover</a>
    </div>
</div>

1 answer

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by SneepS NinjA • **7,691** points · Answer 1 · 2015-07-08T14:18:39+00:00

Edit 2:Upon request of image preview

everything working with plugin, boot, add, remove and preview follows code, ta giving some errors on the console, ai you give a look and correct ;)

	<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>
		<link rel="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>
		
		<script src="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>
		<script src="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>
			<div id="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: 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
                });
            });

          });