1

Tengo un elemento en el DOM con la siguiente estructura:

<div>
<a class="clase-de-ejemplo" href=#><img/></a>
</div>

Como se puede observar, el enlace () contiene una imagen. Necesito borrar el nodo sin eliminar su contenido para que el resultado sea:

<div>
<img/>
</div>

Hasta ahora lo que he conseguido es borrarlo con

$(".clase-de-ejemplo").parent().remove();

Pero esto me elimina el contenido entero. Antes de decantarme por la opción de guardar el contenido en una variable, borrarlo entero y volver a pintarlo sin el padre , me gustaría saber si existe algún procedimiento más sencillo.

1
  • No lo creo, ya que los nodos son una estructura en árbol, si eliminas una rama eliminas las hojas. Creo que la mejor opción es guardar el nodo hijo que quieres conservar y añadirlo al árbol en el lugar que quieres, en este caso dado que es el padre del a, será fácil ya que puedes usar directamente el .parent() para acceder a él desde el a
    – Benito-B
    el 6 dic. 2020 a las 15:49

2 respuestas 2

3

Una alternativa es usar el método unwrap() para eliminar el nodo padre y reemplazarlo por el contenido

$(".clase-de-ejemplo").contents().unwrap();
1
  • 1
    :0 ¡Mucho más sencillo!
    – FranAcuna
    el 6 dic. 2020 a las 16:54
0

Creo que la manera más sencilla sería hacer un replace utilizando el html interno del elemento padre, así:

$(".clase-de-ejemplo").replaceWith($(".clase-de-ejemplo").html());

Igual considero que lo mejor seria guardar la referencia en una variable, lo propongo así por que lo especificas en tu pregunta. Con el fin de visualizar la funcionalidad hice el div color rojo, el a verde y la imagen es negra.

function reemplazar() {
  $(".clase-de-ejemplo").replaceWith($(".clase-de-ejemplo").html());
  printHTML();
}

function printHTML() {
  console.log("Cobntenido del div padre: ", $(".padre").html());
}

printHTML();
.padre {
  background-color: #F00;
}

a {
  background-color: #0F0;
  padding: 10px;
}

img {
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="padre">
  <a class="clase-de-ejemplo" href=#> <img src="https://i.stack.imgur.com/IlZK3.jpg?s=64&g=1" /></a>
</div>
<button type="button" onclick="reemplazar()">Reemplazar</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.