Jak usunąć tylko element nadrzędny, a nie jego elementy potomne w JavaScript?

Metoda niezależna od biblioteki polega na wstawieniu przed sobą wszystkich węzłów potomnych elementu, który ma zostać usunięty (co domyślnie usuwa je ze starej pozycji), przed usunięciem:

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

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

Spowoduje to przeniesienie wszystkich węzłów potomnych w odpowiednie miejsce w odpowiedniej kolejności.

Powinieneś upewnić się, że robisz to z DOM, a nie innerHTML (i jeśli używasz rozwiązania jQuery dostarczonego przez jk, upewnij się, że przesuwa węzły DOM zamiast używać innerHTML wewnętrznie), w celu zachowania rzeczy takich jak procedury obsługi zdarzeń.

Moja odpowiedź jest podobna do insin, ale będzie działać lepiej dla dużych struktur (dołączanie każdego węzła osobno może być opodatkowane od przerysowań, gdzie CSS musi być ponownie zastosowany dla każdego appendChild; z DocumentFragment, dzieje się to tylko raz, ponieważ nie jest widoczne do czasu po jego dzieci są dołączane i jest dodawany do dokumentu).

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

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

Bardziej elegancki sposób jest

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

Użyj nowoczesnego 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) is valid ES5

...array jest operatorem rozproszonym, przekazującym każdy element tablicy jako parametr

Niezależnie od używanej biblioteki musisz sklonować wewnętrzny div przed usunięciem zewnętrznego div z DOM. Następnie musisz dodać sklonowany wewnętrzny div do miejsca w DOM, w którym znajdował się zewnętrzny div. Więc kroki są:

1. Zapisz odniesienie do zewnętrznego rodzica div w zmiennej
2. skopiuj wewnętrzny div do innej zmiennej. Można to zrobić w szybki i brudny sposób, zapisując innerHTML wewnętrznego div do zmiennej lub można skopiować wewnętrzny węzeł drzewa rekurencyjnie przez węzeł.
3. wywołanie removeChild na zewnętrznym rodzicu div z zewnętrznym div jako argumentem.
4. Wstaw skopiowaną zawartość wewnętrzną do zewnętrznego rodzica div w prawidłowej pozycji.

Niektóre biblioteki zrobią to za ciebie, ale coś podobnego do powyższego będzie się działo pod maską.

A ponieważ próbowałeś również w mootools, oto rozwiązanie w mootools.

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

Zauważ, że to zupełnie nieprzetestowane, ale pracowałem już z mootools i powinno działać.

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

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

Jeśli chcesz zrobić to samo w piżamie, oto jak to zrobić. działa świetnie(dziękuję za powieki). udało mi się zrobić odpowiedni edytor rich text, który poprawnie robi style bez bałaganu, dzięki temu.

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)

Szukałem najlepszej odpowiedzi pod względem wydajności podczas pracy nad ważnym DOM.

Eyeless ' s odpowiedź wskazywała, że za pomocą javascript występy będą najlepsze.

Wykonałem następujące testy czasu wykonania na 5000 linii i 400 000 znaków z złożoną kompozycją DOM wewnątrz sekcji do usunięcia. Używam ID zamiast klasy z wygodnego powodu podczas korzystania z javascript.

Za pomocą $.rozpakuj()

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

201.237 ms

Używając $./ align = "left" / ()

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

156.983 ms

Korzystanie z DocumentFragment w 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

Wniosek

Pod względem wydajności, nawet na stosunkowo dużej strukturze DOM, różnica między używaniem jQuery i javascript nie jest ogromna. Zaskakująco {[3] } jest najbardziej kosztowne niż $.replaceWith(). Testy zostały wykonane z jQuery 1.12.4.

Jeśli masz do czynienia z wieloma wierszami, jak to było w moim przypadku użycia, prawdopodobnie lepiej będzie z czymś w tym stylu:

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