Nesse tutorial aprenderemos como adicionar e remover elementos de uma página dinamicamente utilizando Jquery. Para isso crie uma página como a imagem abaixo – é importante utilizar listas e criar dois botões ou links que “enviarão a mensagem” de adicionar ou remover elementos da lista:
Para iniciar o desenvolvimento do script, precisamos de uma maneira para retornar o número de elementos da lista. Para isso utilizamos a função size(), que deve ser ligada à um elemento – no nosso caso, tags li.O que faremos então é contar quantos elementos nossa lista já tem e adicionar um novo, quando o link é clicado. Para adicionar algo novo em uma página utilizamos a função appendTo(‘#’), substituindo # pelo elemento a ser adicionado. A função remove() remove algo da página e pode estar associada à uma div, lista, imagem, entre outros.
[sourcecode language=”html”] <html><head>
<title>Adicionando E Removendo Elementos</title>
<script language="javascript" type="text/javascript" src="jquery-1.5.2.js"></script>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d; }
.header
{
width: 410px;background-color:orange; color:white; font-family:’Kristen ITC’
}
.content
{
background-color: #eeeeee;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
height: auto;
color:teal;
}
</style>
<script type="text/javascript" >
$(document).ready(function () {
var i = $(‘li’).size()+1;
$(‘a#add’).click(function(){
$(‘<li>’ + i + ‘</li>’).appendTo(‘ul’);
i++;
});
$(‘a#delete’).click(function(){
$(‘li:last’).remove();
i–;
});
});
</script>
</head>
<body>
<h1>Aprendendo Jquery</h1>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<a href="#" id="add">Adicionar</a> ||
<a href="#" id="delete">Remover</a>
</body>
</html>
[/sourcecode]
Lembre-se do incremento/decremento da variável i após adicionar/remover um elemento. Como i “conta” o número de elementos em ul, devemos atualiza-la sempre que alguma operação for realizada.
Ao remover um elemento da lista, como desejamos remover o último elemento, utilizamos li:last, indicando que é o último elemento o que será removido.
// Comente!
comentários