Remover Elemento do jQuery

Uma parte muito importante do jQuery é manipular o DOM.

jQuery oferece muitos métodos para excluir elementos HTML ou conteúdo existentes do documento.

Neste capítulo, explicaremos como excluir elementos HTML do DOM/Conteúdo.

Exclusão de elementos jQuery/Conteúdo

Com jQuery, podemos facilmente excluir elementos HTML.

Temos os seguintes métodos jQuery para excluir elementos e conteúdo:

• remove()

• empty()

• unwrap()

A seguir, mostraremos como usar cada método.

Método jQuery remove()

jQuery remove()O método remove o elemento selecionado e seus subelementos do DOM.

O exemplo a seguir remove todos os parágrafos do DOM:

$("button").click(function(){
　　$("p").remove();
});

jQuery remove()O método também aceita um parâmetro que permite filtrar os elementos a serem removidos.

Este parâmetro pode ser qualquer seletor jQuery.

O exemplo a seguir remove todos os parágrafos que contêm "Hello" do DOM:

$("button").click(function(){
　　$("p").remove(":contains('Hello')");
});

Método jQuery empty()

jQuery empty()O método remove todos os subnóveis do elemento selecionado (incluindo nós de texto).

O exemplo a seguir remove todos os subnóveis de todos os parágrafos (incluindo nós de texto):

$("button").click(function(){
　　$("p").empty();
});

Atenção:Este método não remove o elemento em si ou suas propriedades.

Método unwrap() do jQuery

jQuery unwrap()O método remove o elemento pai do elemento selecionado.

O exemplo a seguir remove o elemento pai de todos os parágrafos:

$("button").click(function(){
　　$("p").unwrap();
});

Exclusão de Atributo do jQuery-removeAttr()

jQuery removeAttr()O método remove uma ou mais propriedades do elemento selecionado.

O exemplo a seguir remove a propriedade href de todos os hiperlinks:

$("button").click(function(){
　　$("a").removeAttr("href");
});

Para remover várias propriedades, separe os nomes dos atributos com espaços.

O exemplo a seguir remove várias propriedades de todos os parágrafos:

$("button").click(function(){
　　$("p").removeAttr("id class title");
});

Referência jQuery HTML

Para referência completa dos métodos HTML, acesse nossojQuery HTML / Referência CSS.