Eliminar el padre de un elemento con jQuery
En este tutorial aprenderemos cómo eliminar dinámicamente el padre de un elemento con jQuery.
En algunas ocasiones el elemento padre no tiene una id o clase única pero podemos identificarlo por alguno de sus hijos directos.
Ejemplo 1
Veamos un ejemplo de un elemento section con dos hijos directos:
<!--Elemento padre--> <section> <!--Elementos hijos--> <h1 id="titulo">Título del libro</h1> <p>Contenido</p> </section>
Si queremos eliminar el elemento section podemos seleccionarlo con jQuery y eliminarlo con la función remove, pero si lo eliminamos directamente, esto puede afectar a otros elementos section de la página.
// Código jQuery // Eliminamos al padre del elemento con id=titulo $("#titulo").parent().remove();
Ejemplo 2
En este caso en vez de eliminar al elemento padre lo haremos con su abuelo
<!--Elemento padre--> <section> <!--Elementos hijos de section--> <div id="header-title"> <!--Elemento hijo de header-title--> <h1 id="titulo">Título del libro</h1> </div> <div id="content"> <!--Elemento hijo de content--> <div id="chapter-1"> <p id="chapter-1-content">Contenido del capítulo 1</p> </div> </div> </section>
Para ello usaremos parent 2 veces para subir 2 niveles
// Vamos a eliminar al padre del elemento id=titulo $("#titulo").parent().remove(); // Hemos eliminado al elemento id=header-title // Vamos a seleccionar el elemento id=chapter-1-content // Y vamos a eliminar el elemento content, su abuelo $(".chapter-1-content").parent().parent().remove(); // Al subir 2 niveles hemos eliminado el elemento id=content