una - eliminar un elemento especifico de un array javascript

¿Cómo eliminar solo el elemento principal 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 JavaScript (sin formato), pero no pude tener la idea de cómo hacer esto.

Answer 1

¡Usa JS moderno!

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álido ES5

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

Answer 2

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 los manejadores de eventos.

Mi respuesta es muy parecida a la de Insin, pero funcionará mejor para las estructuras grandes (agregar cada nodo por separado puede ser gravoso para los rediseños donde CSS se debe volver a aplicar para cada appendChild ; con un DocumentFragment , esto solo ocurre una vez, ya que 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 3

El método independiente de la biblioteca consiste en insertar todos los nodos secundarios del elemento que se va a eliminar antes (que implícitamente los elimina de su posición anterior), antes de eliminarlo:

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

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

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

Answer 4

Estaba buscando la mejor respuesta en cuanto a 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.237 ms

Usando $ .replaceWith ()

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

156.983ms

Usar 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.211 ms

Conclusión

En cuanto a rendimiento, incluso en una estructura DOM relativamente grande, la diferencia entre usar jQuery y javascript no es enorme. Sorprendentemente $.unwrap() es más costoso que $.replaceWith() . Las pruebas se realizaron con jQuery 1.12.4.

Answer 5

Independientemente de la biblioteca que utilice, debe clonar el div interno antes de eliminar el div externo del DOM. Luego debe agregar el divisor interno clonado al lugar en el DOM donde estaba el div externo. Entonces los pasos son:

1. Guarde una referencia al padre del div externo en una variable
2. Copie el div interno 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. Llame a removeChild en el padre del div externo 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á sucediendo bajo el capó.

Answer 6

Si desea hacer lo 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 7

Si se trata de varias filas, como lo fue en mi caso de uso, probablemente sea mejor con algo similar a esto:

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

Answer 8

Una forma más elegante es

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

Answer 9

Usando jQuery puedes hacer esto:

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

Enlaces rápidos a la documentación:

• contents (): jQuery
• replaceWith ( content : [ String | Element | jQuery ]): jQuery

Answer 10

Y, como también probaste con mootools, esta es 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 11

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