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