Tutoriales de Informática y Dispositivos Móviles
Tutoriales de Informática y Dispositivos Móviles
Eliminar el padre de un elemento con jQuery

Eliminar el padre de un elemento con jQuery

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

Más tutoriales de jQuery

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »