Eliminar elemento con jQuery

En este tutorial aprenderemos cómo podemos eliminar un elemento con jQuery sin actualizar la página.

función remove()

Con la función remove() de jQuery podemos eliminar cualquier elemento del DOM, su contenido, además de sus hijos y el contenido de los mismos si los hubiera.

Veamos un ejemplo

<!--Elemento de la página-->
<div class="libro">
    <h2>Título</h2>
    <p>Don Quijote de la Mancha</p>
    <h2>Autor</h2>
    <p>Miguel de Cervantes</p>
</div>
<!--Vamos a eliminar el elemento de clase libro y todo lo que contiene-->
<!--Para ello crearemos un botón-->
<input type="button" onclick="borrarLibro()" value="Borrar libro"/>
<!--Código jQuery con la función borrarLibro-->
<script> 
    function borrarLibro() {
        //Seleccionamos los elementos de la clase libro
        $(".libro").remove();
    }
</script>

El resultado es que el elemento desaparece del DOM junto con todo su contenido.

funcitón empty()

Con la función empty() eliminamos todo el contenido de un elemento dejándolo vacío. El elemento no se elimina

Veamos el mismo ejemplo con la función empty()

<!--Elemento de la página-->
<div class="libro"> <h2>Título</h2>
    <p>Don Quijote de la Mancha</p>
    <h2>Autor</h2>
    <p>Miguel de Cervantes</p>
</div>
<!--Vamos a eliminar el elemento de clase libro y todo lo que contiene-->
<!--Para ello crearemos un botón-->
<input type="button" onclick="borrarLibro()" value="Borrar libro"/>
<!--Código jQuery con la función borrarLibro-->
<script>
    function borrarLibro() {
        //Seleccionamos los elementos de la clase libro
        $(".libro").empty(); 
    }
</script>

El resultado es que el elemento de clase libro se queda vacío.

Selector

La tercera opción para eliminar un elemento sería pasándole un selector (filtro) como parámetro a la función remove()

Veamos un ejemplo

<!--Elemento de la página-->
<div class="libro">
    <h2>Título</h2>
    <p>Don Quijote de la Mancha</p>
    <h2>Autor</h2>
    <p>Miguel de Cervantes</p>
</div> <!--Vamos a eliminar el elemento de clase libro y todo lo que contiene-->
<!--Para ello crearemos un botón-->
<input type="button" onclick="borrarLibro()" value="Borrar libro"/>
<!--Código jQuery con la función borrarLibro-->
<script>
    function borrarLibro() {
        //Seleccionamos los párrafos y filtramos por los de la clase libro
        $("p").remove(".libro");
    }
</script>