jQuery - Clonagem

[Deives 0]

Eai pessoal!

 

Estou utilizando .clone() pra clonar e .append para informar o local de clonagem. Está funcionando legal a clonagem de elementos e seus respectivos valores. Mas gostaria de clonar uma div que contém os elementos, por exemplo:

 

(salvar .html)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	var $pergunta = $("select[name=cod_pergunta[]]");
	var $resposta = $("textarea[name=resposta[]]");
	$('#clones').hide();
	
	$('a').click(function(){
		$('#clones').fadeIn(300);
		$("#clone_pergunta").append($($pergunta).clone(true).insertAfter($pergunta));
		$("#clone_resposta").append($($resposta).clone(true).insertAfter($resposta));
	});

});
</script>

<style type="text/css" media="projection,screen">
* { margin:0; padding:0; }
body { margin:10px; }
dl, hr { margin:10px 0; }
dt, dd { padding:5px; }
dt { background:#C00; }
dd { background:#060; }
</style>

<a href="java script:void(0);">clonar</a>

<hr>

<div id="teste">
  <dl>
	<dt><label>Label:</label></dt>
	<dd>
	<select name="cod_pergunta[]" id="cod_pergunta">
	<option value="a">AAA</option>
	<option value="b">BBB</option>
	</select>
	</dd>
	<dt><label>Label:</label></dt>
	<dd><textarea name="resposta[]" id="resposta">CCC</textarea></dd>
  </dl>
</div>

<hr>

<div id="clones" style="display:none;">
  <dl>
	<dt></dt>
	<dd id="clone_pergunta"></dd>
	<dt></dt>
	<dd id="clone_resposta"></dd>
  </dl>
</div>

No caso acima estou clonando os elementos select e textarea.

Quando clico no link clonar ele aparece exatamente como eu quero, mas apartir do segundo clique clona no mesmo local, por isso gostaria de clonar a div teste, não sei se é possivel...

 

agradeço a ajuda!

[Ted k' 126]

veja se isso resolve seu problema:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var $div_teste = $("#teste");
	$('#clones').hide();
	
	$('a').click(function(){
		$('#clones').fadeIn(300);
		$("#clones").append($($div_teste).clone(true).insertAfter($div_teste));
	});
});
</script>

<style type="text/css" media="projection,screen">
* { margin:0; padding:0; }
body { margin:10px; }
dl, hr { margin:10px 0; }
dt, dd { padding:5px; }
dt { background:#C00; }
dd { background:#060; }
</style>

<a href="#" onClick="java script:void(0);">clonar</a>

<hr>

<div id="teste">
  <dl>
	<dt><label>Label:</label></dt>
	<dd>
	<select name="cod_pergunta[]" id="cod_pergunta">
	<option value="a">AAA</option>
	<option value="b">BBB</option>
	</select>
	</dd>
	<dt><label>Label:</label></dt>
	<dd><textarea name="resposta[]" id="resposta">CCC</textarea></dd>
  </dl>
</div>
<hr>
<div id="clones" style="display:none;"></div>

[Deives 0]

Valeu Ted, era exatamente isso

 

Aproveitando, no código abaixo usei .size() pra contar os select's e limitar a remoção. Ao clicar no botão ele logicamente remove todas as div's clones e só funciona uma vez

 

Como remover o último elemento (a última div clones) ?

 

$('button').click(function(){
	var $sel = $('select').size();
	if($sel > 1){
		$('#clones').remove();
	}
});

<button>remover</button>

[Deives 0]

Gostaria de saber como remover a última div clonada ou copiada quando clicar no botão...

[Ted k' 126]

teste assim:

 

<script type="text/javascript">
$(document).ready(function(){
	var $div_teste = $("#teste");
	$('#clones').hide();
	
	$('a').click(function(){
		$('#clones').fadeIn(300);
		$("#clones").append($($div_teste).clone(true).insertAfter($div_teste));
	});
	
	$('button').click(function(){
		var $sel = $('select').size();
		if($sel > 1){
			$('#teste').fadeOut(300);
			$('#teste').remove();
		}
	});
});
</script>

[Deives 0]

Não deu certo...

 

Não sei se facilita ou piora dessa forma (rs): colocar o link clonar e o botão remover dentro da div teste assim os clonando também. Quando clicar no botão remover ele remove aquele clone apenas, seria até melhor no meu caso...

 

Agora no caso do último elemento, tentei $('dd:last'), $('dt:last') e $('select:last') para testar e funcionaram, mas $('#teste:last') não aceita...