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.

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.

La solución que planteamos es la de seleccionar a uno de sus hijos y, desde ahí eliminar a su elemento padre de esta manera

<script>
  //Código jQuery
  //Eliminamos al padre del elemento con id=titulo
  $("#titulo").parent().remove();
</script>

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo