Tip:
Highlight text to annotate it
X
Olá pessoal, na aula passada nós vimos como incluir com precisão
elementos na árvore DOM, utilizando a biblioteca JQuery
nesta aula vamos estudar as funções para remoções de elemento dessa árvore
nós temos três funções principais
a função remove, que remove elementos alvos, ou seja
você define um determinado o elemento, e esses elementos serão removidos
a função empty limpa todos elementos dentro do elemento alvo
e a função unwrap remove o elemento que envolve seu elemento alvo
então vamos estudar aqui essas três funções nessa aula de hoje
vamos começar olhando o resultado da aula anterior
na aula anterior nós criamos antes e depois da nossa ul
um elemento h1, e um elemento h1 antes e depois
e dentro da nossa ul, nós criamos outras li's
na primeira posição e na última posição
o quê que nós vamos fazer aqui agora
primeira coisa, eu quero remover
todos os elementos h1, ou seja, esse elemento e esse elemento
como é que a gente faz isso?
eu defino qual é o meu elemento alvo
meu elemento alvo aqui é o elemento h1
e eu quero remover todos esses elementos da minha árvore DOM
então ao clicar no botão esses elementos
foram removidos ali da nossa árvore
e seu eu quisesse remover apenas um elemento específico?
por exemplo, o elemento que está na primeira posição
ele tem um id "titulo"
então eu poderia filtrar esse elemento
aqui na função remove
eu vou manter aqui, apenas para vocês verem a diferença
e aqui eu poderia definir um titulo
alías um filtro
então eu quero filtrar todos h1 que tenham um titulo
claro a gente também poderia fazer isso diretamente aqui utilizando o seletor
a outra função é função empty, então vamos lá
vimos a função remove, e a função empty?
a função empty, ela limpa de dentro do seu elemento alvo
todos os outros elementos que tiverem ali dentro
essa função remove, ela exclui o seu elemento alvo
então aqui não existe mais tag h1 por exemplo
a função empty ela vai remover apenas o contéudo interno
então por exemplo, aqui nós temos uma ul com as sua três lis
o que nós vamos fazer aqui?
eu quero remover todas as lis, ou seja, todo o conteúdo interno da minha ul
então eu posso procurar esse alvo, que é a minha ul
e falar aqui que eu quero limpar todos os conteúdos internos dessa ul
então o que nós vamos fazer aqui?
vamos primeiro olhar a nossa ul
então está aqui, a nossa ul, dentro de um parágrafo tem três lis
quando nós clicarmos nesse botão
ele removeu todas as lis ali de dentro
vamos ver agora conferir se ele manteve a ul
então está aqui a ul, o elemento ul se manteve
ele só limpou o conteúdo interno dessa ul
então, esse é o efeito da função empty
e a função unwrap?
a função unwrap, que é essa última função
ela remove o elemento envolvente
ela remove o elemento que foi utilizado para encobrir o elemento alvo
então aqui no caso, nós haviamos criado
a nossa ul dentro de um parágrafo
então quando a gente coloca aqui
o nosso elemento alvo "ul"
e eu peço para ele remover o elemento envolvente
ele vai excluir o elemento paragráfo que está envolvendo essa ul
vamos ver aqui, então aqui nós tenho a ul
dentro de um paragráfo, vamos conferir aqui
então aqui oh, tem um paragráfo
que está envolvendo essa ul
e quando a gente clicar nesse botão
ele removeu aquele paragráfo, mais manteve a ul
vamos conferir aqui
então tá aqui a ul, está ai agora
mais não tem mai um paragráfo envolvendo esse elemento
então é para isso que serve a função unwrap
então pessoal, essas são as três principais funções
para remoção de elementos da árvore DOM
vejo vocês na próxima aula pessoal
até lá.