[javascript] JavaScript에서 부모 요소 만 제거하고 자식 요소는 제거하지 않는 방법?

Program / 글쓴이

의 말을하자:

<div>
  pre text
  <div class="remove-just-this">
    <p>child foo</p>
    <p>child bar</p>
    nested text
  </div>
  post text
</div>

이에:

<div>
  pre text
  <p>child foo</p>
  <p>child bar</p>
  nested text
  post text
</div>

Mootools, jQuery 및 심지어 (raw) JavaScript를 사용하는 방법을 알아 냈지만이를 수행하는 방법에 대한 아이디어를 얻지 못했습니다.

답변

jQuery 를 사용하면 다음과 같이 할 수 있습니다.

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

문서에 대한 빠른 링크 :

  • 내용 () : jQuery
  • replaceWith ( 내용 : [ 문자열 | 요소 | jQuery ]) : jQuery

답변

라이브러리 독립적 인 방법은 제거하기 전에 제거 할 요소의 모든 자식 노드를 삽입하는 것입니다 (이전 위치에서 암시 적으로 제거됨).

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

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

그러면 모든 자식 노드가 올바른 순서로 올바른 위치로 이동합니다.

답변

당신은 아닌 DOM이 작업을 수행 할 수 있는지 확인해야한다 innerHTML(그리고 JK가 제공하는 jQuery를 솔루션을 사용하는 경우, 반드시 오히려 사용하여보다 DOM 노드를 이동하는 것을 확인 innerHTML이벤트 핸들러 등을 보존하기 위해 내부적으로).

내 대답은 insin과 매우 비슷하지만 큰 구조에서 더 잘 수행됩니다 (각 노드를 개별적으로 추가하면 CSS가 각각에 대해 다시 적용되어야하는 다시 그리기에 부담이 될 수 있습니다 appendChild.을 사용하면 DocumentFragment이 작업이 끝날 때까지 표시되지 않으므로 한 번만 발생합니다. 하위 항목이 모두 추가되고 문서에 추가됨).

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

답변

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

답변

더 우아한 방법은

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

답변

현대 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) 유효한 ES5

...array 각 배열 요소를 매개 변수로 전달하는 확산 연산자입니다.

답변

어떤 라이브러리를 사용하든 DOM에서 외부 div를 제거하기 전에 내부 div를 복제해야합니다. 그런 다음 복제 된 내부 div를 외부 div가 있던 DOM의 위치에 추가해야합니다. 따라서 단계는 다음과 같습니다.

  1. 외부 div의 부모에 대한 참조를 변수에 저장
  2. 내부 div를 다른 변수에 복사합니다. innerHTML내부 div를 변수 에 저장하여 빠르고 더러운 방식으로 수행 하거나 내부 트리를 노드별로 재귀 적으로 복사 할 수 있습니다.
  3. 전화 removeChild인수로 외부 사업부와 외부 DIV의 부모에.
  4. 복사 한 내부 콘텐츠를 올바른 위치에있는 외부 div의 부모에 삽입합니다.

일부 라이브러리는이 작업의 일부 또는 전부를 수행하지만 위와 같은 작업이 내부적으로 진행됩니다.