Desenvolvimento - Javascript

Trabalhando com remoção e substituição de conteúdo com jQuery

Veja neste artigo como trabalhar com a manipulação de um conteúdo via jQuery.

por Joel Rodrigues


A biblioteca jQuery nos fornece uma série de métodos para remover e substituir elementos do DOM, os quais podem ser extremamente úteis nas mais diversas situações.

Neste artigo, apresentarei os métodos de remoção “detach”, “empty”, “remove” e “unwrap”, e os métodos de subnstituição “replaceAll” e “replaceWith”.

Para os exemplos que serão vistos, utilizarei a seguinte estrutura HTML:

Listagem 1: Estrutura HTML utilizada nos exemplos

<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
	$(function(){
		//o código ficará aqui
	});
	</script>
</head>
<body>
	<h3>Lista de itens</h3>
	<ul id="lista">
		<li>Primeiro item</li>
		<li>Segundo item</li>
		<li>Terceiro item</li>
	</ul>
</body>
</html>

Os códigos apresentados ao longo deste artigo, como é possível imaginar, devem ser inseridos no local indicado acima.

Vejamos então os métodos na teoria e prática.

detach

A função detach() foi inserido na versão 1.4 da biblioteca e permite remover os elementos selecionados, porém sem que haja perda do conteúdo. Ou seja, os elementos selecionados são desligados de seu container, mas seu conteúdo pode ser recuperado no momento do desligamento. Os métodos e eventos jQuery ligados aos elementos não são perdidos.

Na Listagem 2, os itens da lista são removidos e armazenados em uma variável “itens”.

Listagem 2: Exemplo de uso do detach

var itens = $("#lista li").detach();

Assim, caso se deseje inserir novamente os itens em algum ponto do documento, pode-se usar a variável “itens” e os dados relacionados a eles estariam mantidos.

empty

O método empty(), como o próprio nome sugere, serve para esvaziar todo um elemento, removendo por inteiro o seu conteúdo. Uma vez removido do DOM, o conteúdo não pode ser recuperado.

No código a seguir, todos os itens da lista são removidos sem prévio armazenamento.

Listagem 3: Exemplo de uso do empty

var itens = $("#lista").empty();

Repare que o alvo do método não são os itens da lista e sim a própria tag UL.

remove

O método remove() literalmente remove o elemento alvo de sua chamada do DOM. Após a chamada desse método, todos os dados de eventos ligados ao elemento são perdidos.

A Listagem 4 mostra a sintaxe de uso dessa função.

Listagem 4: Exemplo de uso do remove

var itens = $("#lista").remove();

Dessa vez, toda a lista é removida (inclusive a tag UL).

unwrap

Este método funciona, pode-se dizer, no sentido inverso aos demais já apresentados. O unwrap() remove do DOM o elemento pai do selecionado, deixando o elemento alvo “solto” no container mais externo ao seu pai.

Por exemplo, a Listagem 5 mostra uma chamada dessa função para os itens da lista. Com isso, as tags LI ficam soltas no BODY e a tag UL é removida.

Listagem 5: Exemplo de uso do unwrap

var itens = $("#lista li").unwrap();

Agora que já conhecemos os métodos de remoção de elementos, veremos os de substituição.

replaceAll

Esta função substitui o os elementos passados como parâmetro pelo conteúdo do elemento que a invocou. A compreensão do funcionamento fica mais fácil quando vemos o método em ação na prática.

Então, o código a seguir substitui os elementos LI da lista pelo elemento H3. O título H3 é removido de seu local original.

Listagem 6: Exemplo de uso do replaceAll

var itens = $("h3").replaceAll("#lista li");

Após a execução deste código, deve-se ter três elementos H3 no corpo do documento.

replaceWith

O replaceWith funciona de forma inversa ao replaceAll. Enquanto no primeiro o elemento que invoca o método é o valor substituto, no segundo, o novo valor é passado como parâmetro, enquanto o elemento a ser substituído é quem invoca o método.

Pode parecer um pouco confusa a definição teórica, porém, vendo uma aplicação prática se torna mais fácil a compreensão do método e quando utilizá-lo.

Na listagem a seguir, is itens da lista são substituídos por tags H4 com o conteúdo “Novo conteúdo”.

Listagem 7: Exemplo de uso do replaceWith

var itens = $("#lista li").replaceWith("<h4>Novo conteúdo</h4>");

Confirmando o que foi dito na definição, são os itens (LI) que chamam a função, enquanto o novo valor (tags H4) é passado como parâmetro.

Conclusão

Como foi visto, os métodos de remoção e substituição de elementos fornecidos nativamente pela jQuery são de fácil compreensão e utilização, assim como a maior parte da biblioteca.

Espero que o conteúdo aqui apresentado tenha sido esclarecedor e possa ajudar aqueles que precisarem utilizar esses métodos em seus projetos, bem como aos interessados por desenvolvimento web em geral.

Grato pela atenção, finalizo aqui este artigo. Até a próxima.

Conheça os cursos de jQuery da Devmedia:
Joel Rodrigues

Joel Rodrigues - Técnico em Informática - IFRN Cursando Bacharelado em Ciências e Tecnologia - UFRN Programador .NET/C# e Delphi há quase 3 anos, já tendo trabalhado com Webservices, WPF, Windows Phone 7 e ASP.NET, possui ainda conhecimentos em HTML, CSS e Javascript (JQuery).