Eliminar elemento de jQuery

Una parte muy importante de jQuery es manipular el DOM.

jQuery ofrece muchos métodos para eliminar elementos HTML o contenido existentes en el documento.

En este capítulo, explicaremos cómo eliminar elementos HTML del DOM./Contenido.

Eliminación de elementos jQuery/Contenido

Con jQuery, podemos eliminar elementos HTML de manera sencilla.

Tenemos los siguientes métodos jQuery para eliminar elementos y contenido:

• remove()

• empty()

• unwrap()

A continuación, le mostraremos cómo usar cada método.

Método jQuery remove()

jQuery remove()El método elimina el elemento seleccionado y sus elementos secundarios del DOM.

El siguiente ejemplo elimina todos los párrafos del DOM:

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

jQuery remove()El método también acepta un parámetro que le permite filtrar los elementos que se deben eliminar.

Este parámetro puede ser cualquier selector jQuery.

El siguiente ejemplo elimina todos los párrafos que contienen "Hello" del DOM:

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

Método jQuery empty()

jQuery empty()El método elimina todos los nodos secundarios del elemento seleccionado (incluidos los nodos de texto).

El siguiente ejemplo elimina todos los nodos secundarios de todos los párrafos (incluidos los nodos de texto):

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

Nota:Este método no elimina el elemento en sí o sus atributos.

Método unwrap() de jQuery

jQuery unwrap()El método elimina el elemento padre del elemento seleccionado.

El siguiente ejemplo elimina todos los elementos padre de los párrafos:

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

Eliminación de atributos de jQuery-removeAttr()

jQuery removeAttr()El método elimina una o más propiedades del elemento seleccionado.

El siguiente ejemplo elimina la propiedad href de todos los enlaces:

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

Para eliminar múltiples propiedades, separe los nombres de las propiedades con espacios.

El siguiente ejemplo elimina múltiples propiedades de todos los párrafos:

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

Referencia de jQuery HTML

Para obtener referencias de métodos HTML completos, visite nuestrajQuery HTML / Referencia de CSS.