Jquery – Adicionando e removendo elementos dinamicamente

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

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

2 Comentários

  • Responder novembro 13, 2012

    Plínio Thalles

    Parabéns pelo Post!

  • Responder maio 30, 2014

    HELISSON SILVA

    Boa noite! No site que estou criando tenho uma com algumas . Onde preciso URGENTEMENTE criar um componente de ‘like’ (tipo votação) que registre os ‘likes’ no banco de dados e se movimente dinamicamente em ordem descrecente de acordo com as mais votadas. Alguém pode me dar uma ideia, luz? Ajax, JSON, JQuery, Plugin? Tema está sendo feito em WordPress.
    Muito Obg.

// Siga as boas práticas: Comente!