Índice

Eliminar un elemento

1. Borrar un elemento

remove() o remove(selector)

Elimina del árbol del DOM todos los elementos que responden a los criterios de selección.

$("p").remove(): elimina los párrafos <p>.

$(’div’).remove(’.box’): elimina las cajas <div> con la clase box.

Este método devuelve un objeto jQuery.

detach() o detach(selector)

La versión 1.4 de jQuery introdujo el método detach(). Es idéntico a remove(), pero conserva todos los datos asociados a los elementos que se eliminan. Puede resultar útil cuando los datos que se eliminan se insertan más adelante en el script.

$("p").detach(":contains(’Bienvenido’)"): elimina el párrafo <p> que contiene el dato "Bienvenido".

Ejemplo

Pensemos en un botón de tipo casilla de selección (checkbox). Cuando se selecciona, se muestra un campo de línea de texto. Cuando se deselecciona, el campo de texto desaparece.

Aspecto inicial:

images/8_7_1_v41.png

Aspecto obtenido después de seleccionar la casilla:

images/8_7_1_v42.png

El documento HTML:

<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function(){ 
        $("#clic").click(function(){ 
        if ($(this).is(":checked")){  ...