¿Cómo eliminar solo el elemento primario y no sus elementos secundarios en JavaScript?

Question

Digamos:

<div> 
some text 
    <div class="remove-just-this"> 
    <p>foo</p> 
    <p>bar</p> 
    some text node here 
    </div> 
some text 
</div> 

a esto:

<div> 
some text 
    <p>foo</p> 
    <p>bar</p> 
    some text node here 
some text 
</div> 

he estado averiguando usando Mootools, jQuery e incluso (en bruto) de JavaScript, pero no pudo conseguir la idea de cómo hacer esto .

Answer 1

Usando jQuery se puede hacer esto:

var cnt = $(".remove-just-this").contents(); 
$(".remove-just-this").replaceWith(cnt); 

enlaces rápidos a la documentación:

• contents(): jQuery
• replaceWith (contenido: [cadena | Elemen t | jQuery]): jQuery

Answer 2

Cualquiera que sea la biblioteca que está utilizando tiene que clonar el div interior antes de quitar el div exterior del DOM. Luego debe agregar el divisor interno clonado al lugar en el DOM donde estaba el div externo. Por lo que los pasos son:

1. Guardar una referencia a los padres del div exterior en una variable
2. Copiar el div interior a otra variable. Esto se puede hacer de una manera rápida y sucia guardando el innerHTML del div interno en una variable o puede copiar el árbol interno recursivamente nodo por nodo.
3. Llama al removeChild en el padre del div exterior con el div externo como argumento.
4. Inserte el contenido interno copiado en el padre del div externo en la posición correcta.

Algunas bibliotecas harán todo o parte de esto por usted, pero algo como lo anterior estará pasando bajo el capó.

Answer 3

El método de biblioteca independiente es insertar todos los nodos secundarios del elemento a ser eliminado antes de sí mismo (que implícitamente las aleja de su posición anterior), antes de retirarla:

while (nodeToBeRemoved.firstChild) 
{ 
    nodeToBeRemoved.parentNode.insertBefore(nodeToBeRemoved.firstChild, 
              nodeToBeRemoved); 
} 

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved); 

Esto moverá todos nodos secundarios al lugar correcto en el orden correcto.

Answer 4

Debe asegurarse de hacer esto con el DOM, no innerHTML (y si usa la solución jQuery proporcionada por jk, asegúrese de mover los nodos DOM en lugar de usar innerHTML internamente), para preservar cosas como el evento manejadores.

Mi respuesta es muy parecida a la de insin, pero funcionará mejor para estructuras grandes (agregar cada nodo por separado puede ser gravoso en rediseños donde CSS debe volverse a aplicar para cada appendChild; con un Fragmento de documento, esto solo ocurre una vez como está no se hace visible hasta después de que sus hijos estén todos anexados y se agreguen al documento).

var fragment = document.createDocumentFragment(); 
while(element.firstChild) { 
    fragment.appendChild(element.firstChild); 
} 
element.parentNode.replaceChild(fragment, element); 

Answer 5

Y, como ya probó en mootools también, aquí está la solución en mootools.

var children = $('remove-just-this').getChildren(); 
children.replaces($('remove-just-this'); 

Tenga en cuenta que no está probado, pero he trabajado con mootools antes y debería funcionar.

http://mootools.net/docs/Element/Element#Element:getChildren

http://mootools.net/docs/Element/Element#Element:replaces

Answer 6

$('.remove-just-this > *').unwrap() 

Answer 7

si desea hacer esto mismo en pijama, así es como se hace. funciona muy bien (gracias a los párpados). He podido crear un editor de texto enriquecido adecuado que sin problemas haga los estilos correctamente, gracias a esto.

def remove_node(doc, element): 
    """ removes a specific node, adding its children in its place 
    """ 
    fragment = doc.createDocumentFragment() 
    while element.firstChild: 
     fragment.appendChild(element.firstChild) 

    parent = element.parentNode 
    parent.insertBefore(fragment, element) 
    parent.removeChild(element) 

Answer 8

forma más elegante es

$('.remove-just-this').contents().unwrap(); 

Answer 9

que estaba buscando la mejor respuesta en cuanto al rendimiento mientras trabajaba en un DOM importante.

La respuesta de eyelidlessness señalaba que el uso de javascript sería lo mejor.

Realicé las siguientes pruebas de tiempo de ejecución en 5.000 líneas y 400.000 caracteres con una composición DOM compleja dentro de la sección para eliminar. Estoy usando una ID en lugar de una clase por razones convenientes cuando uso javascript.

Usando $ .unwrap()

$('#remove-just-this').contents().unwrap(); 

201.237ms

Usando $ .replaceWith()

var cnt = $("#remove-just-this").contents(); 
$("#remove-just-this").replaceWith(cnt); 

156.983ms

Usando DocumentFragment en javascript

var element = document.getElementById('remove-just-this'); 
var fragment = document.createDocumentFragment(); 
while(element.firstChild) { 
    fragment.appendChild(element.firstChild); 
} 
element.parentNode.replaceChild(fragment, element); 

147.211ms

Conclusión

En cuanto al rendimiento, incluso en un tiempo relativamente gran estructura DOM, la diferencia entre usar jQuery y javascript no es enorme. Sorprendentemente $.unwrap() es más costoso que $.replaceWith(). Las pruebas se han realizado con jQuery 1.12.4.

Answer 10

Si se trata de varias filas, como lo fue en mi caso de uso son probablemente mejor con algo en este sentido:

$(".card_row").each(function(){ 
     var cnt = $(this).contents(); 
     $(this).replaceWith(cnt); 
    }); 

Answer 11

uso moderno JS!

const node = document.getElementsByClassName('.remove-just-this')[0]; 
node.replaceWith(...node.childNodes); // or node.children, if you don't want textNodes 

oldNode.replaceWith(newNode) es válida ES5

...array es el operador de difusión, pasando cada elemento de la matriz como un parámetro